Grunt完成对LESS实时编译

安装

安装grunt需要先安装node.js。

之后需要借助npm来安装grunt-cli,在cmd中npm install -g grunt-cli。(测试grunt --version看是否正确显示grunt-cli版本)

这样，就完成了grunt的安装。

在项目中使用

首先创建一个项目目录，由于grunt是node环境下运行，需要使用npm进行管理。所以项目必须要有一个package.json文件，里面最重要的是写明白devDependencies依赖关系。这里有一个例子（用于编译less）可以使用：

?


 

{

  "name": "ProjectName",

  "version": "0.1.0",

  "devDependencies": {

    "grunt": "*",

    "grunt-contrib-less": "*",

    "grunt-contrib-watch": "*"

  }

}

　　

有了package.json文件之后，我们就可以使用npm install来建立项目了。但是此时，还不能使用grunt命令，因为还差一个Gruntfile.js或者Gruntfile.coffee的文件。这个文件作用是grunt如何工作。继续那个例子（编译less）的Gruntfile.js如下：

?


 

module.exports = function (grunt) {

grunt.initConfig({

    less: {

        compile: {

            files: {

                ‘css/test.css‘: ‘css/test.less‘

            }

        },

        yuicompress: {

            files: {

                ‘css/test-min.css‘: ‘css/test.css‘

            },

            options: {

                yuicompress: true

            }

        }

    },

    watch: {

        scripts: {

            files: [‘css/*.less‘],

            tasks: [‘less‘]

        }

    }

});

grunt.loadNpmTasks(‘grunt-contrib-less‘);

grunt.loadNpmTasks(‘grunt-contrib-watch‘);

grunt.registerTask(‘default‘, [‘less‘, ‘watch‘]);

};

　　

这样，在项目路径下，cmd中执行grunt来完成对css路径下less文件的实时编译了。

时间： 2024-11-05 23:23:39

Grunt完成对LESS实时编译的相关文章

Webstorm实时编译SASS和LESS

Webstorm自带一个File Watchers功能,设置一下,即可实时编译SASS,LESS等 菜单:File->Settings->左栏Tools下的File Watchers,按右上角加号添加 为scss添加watcher 为less添加watcher 然后保存文件的时候就自动编译出相应的.css啦~

关于IDEA不能实时编译的一个临时解决办法。。。。

https://my.oschina.net/fdblog/blog/172229 昨天在 http://www.oschina.net/question/240989_130365 讨论关于IDEA不能实时编译的一个问题 但是貌似还是没有解决方案 其中 虽然 jse7en 童鞋告诉我们 可以(ctrl+s和ctrl+F9)进行保存和编译,但是...2个按键你懂得..太麻烦了 而 gohsy 童鞋告诉我们要有节奏感....但是作为一个有强迫症的程序员...你懂得,我们不允许任何东西不在我们的掌控

grunt配置sass项目自动编译

1.安装Ruby和SASS 首先我们需要在电脑上安装Ruby和SASS.如果您使用的是Mac,您就没必要安装Ruby.如果您使用的是Window系统,你需要安装Ruby. 2.安装Nodejs 由于使用Grunt需要Nodejs的支持,所以我们要确认自己的电脑已安装了nodejs.安装好以后看看在命令行下能不能执行node命令了,如果可以那么就表示安装成功了. 简单点的安装就是直接进入Nodejs官网中下载各系统所需的安装包进行安装. 3.安装grunt 在安装grunt.js之前,需要先安装G

Grunt设置

Grunt完成对LESS实时编译. 安装 安装grunt需要先安装node.js. 之后需要借助npm来安装grunt-cli,在cmd中npm install -g grunt-cli.(测试grunt --version看是否正确显示grunt-cli版本) 这样,就完成了grunt的安装. 在项目中使用 首先创建一个项目目录,由于grunt是node环境下运行,需要使用npm进行管理.所以项目必须要有一个package.json文件,里面最重要的是写明白devDependencies依赖关

grunt集成自动启动

Grunt可以执行像压缩, 编译, 单元测试, 代码检查以及打包发布的任务. 本文介绍使用Grunt实现nodejs程序自启动功能. 目录: Grunt介绍 Grunt安装 Grunt使用 Grunt常用加载任务的插件: 1)grunt-contrib-watch 2)grunt-nodemon 3)grunt-concurrent 1.Grunt介绍 Grunt是一个自动化的项目构建工具. 如果你需要重复的执行像压缩, 编译, 单元测试, 代码检查以及打包发布的任务. 那么你可以使用Grunt

前端自动化之利剑——Grunt

JavaScript的世界里一切皆模块. 一切要从NodeJs说起,说起NodeJs就不得不说npm.Express,npm是NodeJs的包管理工具,Express是基于NodeJs的开发框架,一步步安装完NodeJs后就已经安装好npm了,然后你可以npm install -g express-generator来安装最新版的Express4.x:这里不说Express了:来通过npm安装Grunt,npm install -g grunt-cli全局安装grunt命令行工具,要正式使用Gr

Grunt 安装与配置环境

当时学习 Grunt 的时候,真是很头疼.分了两个时间段,学习了两次才硬啃下来,之后才能用在项目中.主要原因我认为是学习资料和文档上面写的太高端了.这类的文档或者资料有个显著特点,上来先简单介绍一下这个玩意(Grunt 是一个 JavaScript 任务运行器),然后就是如何安装,直接给你配置文件的语法,如何使用插件,新手往往看完还不知所以然. 就像我第一次学习的时候,只是大体知道 Grunt 很火,大家都在用,但耐着心看文档和一些别人的学习总结,还是困惑,这到底是个什么东西?究竟干什么用?为什

node.js编译less文件

大多数文章对于到底怎样编译less文件并没有一个详细的说明,清一色的grunt命令,看得也是晕晕的,所以也就有了这篇手记的存在. 步入正题 1.安装配置好sublime text3(包括各种实用插件)和node.js后,新建一个文件夹,这里取名less_test,文件目录结构如下:其中node_modules文件夹是调用npm install命令的时候在当前目录下创建的安装模块.2.在test.less文件里面随意写些代码:3.打开命令行(cmd),进入less_test文件夹,输入npm in

IntelliJ IDEA 编译方式介绍

原文:https://github.com/judasn/IntelliJ-IDEA-Tutorial/blob/newMaster/make-introduce.md 编译方式介绍 相比较于 Eclipse 的实时自动编译,IntelliJ IDEA 的编译更加手动化,虽然 IntelliJ IDEA 也支持通过设置开启实时编译,但是不建议,因为太占资源了.IntelliJ IDEA 编译方式除了手工点击编译按钮进行编译之外,还有就是在容器运行之前配置上一个编译事件,先编译后运行.默认下 In