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

Grunt 自动编译 Less 文件配置

时间:2016-05-07 12:58:28      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:

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

 

Grunt 自动编译 Less 文件配置

标签:

原文地址:http://www.cnblogs.com/zouqin/p/5467901.html

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