Grunt 自动编译 Less 文件配置

1.安装Grunt

　　http://www.gruntjs.net/getting-started

2.编辑 package.json 文件

{
  "name": "GruntTest",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-contrib-less": "^1.3.0"
  }
}

3.执行npm命令

npm install

注意：必须在package.json文件目录下执行

执行命令后就会在根据package.json文件下载相关插件

4.配置Gruntfile.js文件

 1 module.exports = function(grunt) {
 2     
 3   // Project configuration.
 4   grunt.initConfig({
 5       
 6         pkg: grunt.file.readJSON('package.json'),
 7         less: {
 8             main: {        
 9                 files: {
10                   '../css/login.css': '../model/less/*.less'
11                 }
12             }, 
13             task: {     
14                 expand: true,
15                 src: ['../model/less/*.less'], 
16                 dest:'dis',
17                 ext: '.css' 
18             }
19               
20         },
21         watch: {
22             scripts: {
23                 files: ['../model/less/*.less'],
24                 tasks: ['less:task']
25             }
26         }
27     });
28     grunt.loadNpmTasks('grunt-contrib-less');
29     grunt.loadNpmTasks('grunt-contrib-watch');
30     
31     
32     grunt.registerTask('default', ['watch','less']);
33 };

5.执行 Grunt

grunt

 

posted @ 2016-05-07 10:41  好叶叶孤城  阅读(460)  评论(0)  编辑  收藏  举报