码迷,mamicode.com
首页 > 其他好文 > 详细

Grunt设置

时间:2014-09-29 21:59:51      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:blog   io   使用   java   文件   div   c   on   cti   

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文件的实时编译了。

Grunt设置

标签:blog   io   使用   java   文件   div   c   on   cti   

原文地址:http://www.cnblogs.com/luanfei/p/4000803.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!