grunt基础知识我就不再写了,直接看官网就可以了.官网的教程还是挺清楚的.

大概看了一点以后,打算自己试试看,就按照现在公司的项目需求,拿来练练手.需求如下:

gruntProject根目录下,有html页面,less文件夹,jssrc文件夹.
less文件夹下,有一些公共的less文件,像global.less,mixins.less,variables.less.

像index,buy,这些比较大的页面,会有一个文件夹,把它里面的每个版块分别写入一个less文件,而根目录下的index.less,则引入了index文件夹下的less文件.

jssrc文件夹下则是每个页面引入的js,至于jq等框架,则不在这个根目录下,在更外层,这里暂时不需要考虑.

我们的需求就是,404.less,buy.less,index.less,这些页面需要直接引用的less,是需要被编译成css,并且压缩的,压缩后输出在根目录的css文件夹下.而公共的less,则不需要编译,另外,less文件夹下的文件夹里的less文件,也是不需要编译并输出的.说白了就是,一个页面引入一个css,其它作为依赖被引入的less文件,都不需要编译.而js文件,每个都需要压缩,压缩后输出到js文件夹下.

---

这样,一共需要用到四个插件:

1. 编译less的插件: grunt-contrib-less
2. 压缩js的插件: grunt-contrib-uglify
3. 实时监测的插件: grunt-contrib-watch
4. 加载所有插件的插件: load-grunt-tasks

---

首先创建一个package.json文件: npm init

然后安装插件:

1. 安装grunt-cli: sudo npm install -g grunt-cli
2. 安装grunt: npm install grunt –save-dev
3. 安装load-grunt-tasks: npm install load-grunt-tasks –save-dev
4. 安装另外几个插件,不赘述

然后开始书写Gruntfile.js:

'use strict';

module.exports = function(grunt) {

    require('load-grunt-tasks')(grunt)

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        watch: {
            files:['jssrc/*.js','less/**/*.less'],
            tasks:['default']
        },
        uglify: {
            build: {
                expand: true,
                cwd: 'jssrc/',
                src: '*.js',
                dest: 'js/',
                ext: '.min.js',
                extDot: 'last'
            }
        },
        less: {
            options: {
                compress:true
            },
            build: {
                expand: true,
                cwd: 'less/',
                src: ['*.less','!global.less','!mixins.less','!variables.less'],
                dest: 'css/',
                ext: '.min.css',
                extDot: 'last'
            }
        }
    });

    // 默认被执行的任务列表。
    grunt.registerTask('default', ['uglify','less']);

};

下面分析一下这个文件:

1.基本格式:

'use strict';

module.exports = function(grunt) {

    ...

};

---

2.加载package.json的devDependencies里的插件:

require('load-grunt-tasks')(grunt)

---

3.配置任务:

grunt.initConfig({

    ...

})

---

4.获取package.json里的参数(这个例子用不到):

pkg: grunt.file.readJSON('package.json'),

---

5.配置uglify任务:

uglify: {
    build: {
        expand: true,
        cwd: 'jssrc/',
        src: '*.js',
        dest: 'js/',
        ext: '.min.js',
        extDot: 'last'
    }
}

这里使用的是动态配置的方法,就是说,不是针对某几个文件,而是所有匹配的文件.

• expand: true 开始动态配置
• cwd: 路径,是下面的src的相对路径
• src: 需要压缩的文件,相对于cwd路径,\.js表示cwd根目录下的所有js文件.*(不包括子文件夹下的js)
• dest: 压缩后输入的js的路径.不是相对于cwd哦,就是相对于项目根目录.
• ext: 压缩后的文件的后缀名替换.
• extDot: 从文件名里的第几个句点开始替换.这里定义last,就表示从最后一个句点开始替换.比如a.b.c.js,从最后一个句点开始替换,就是.js部分替换成ext.

这样做的好处是不需要经常改动配置文件,但是当文件非常多,并且开启了watch任务的时候,对电脑的性能是个很大的挑战.

---

6.配置less任务:

less: {
    options: {
        compress:true
    },
    build: {
        expand: true,
        cwd: 'less/',
        src: ['*.less','!global.less','!mixins.less','!variables.less'],
        dest: 'css/',
        ext: '.min.css',
        extDot: 'last'
    }
}

less任务的options中设置compress属性为true,表示编译后需要压缩.

同样,less任务也使用动态配置,它和uglify任务的配置有一点不同:

src里排除了global.lee,mixins.less,variables.less,这些全局的,不需要编译的文件.

---

7.配置watch任务:

watch: {
    files:['jssrc/*.js','less/**/*.less'],
    tasks:['default']
}

files属性配置需要监测变化的文件,tasks属性配置文件变化以后需要执行的任务.

这里再次用到了一个很重要的知识点: /\.js 表示目录下所有的js文件,不包括目录的子目录下的js文件. /**/*.less* 表示目录下的所有less文件,包括目录的子目录下的less文件.

---

8.注册default任务:

grunt.registerTask('default', ['uglify','less']);

把默认要执行的任务定义为uglify任务和less任务.

---

然后执行一下grunt,就可以看到文件被编译压缩好了:

开启实时监测模式: grunt watch, 然后修改less或者js,都会实时编译压缩.

---

查看源码

其实grunt就是使用一个又一个的插件,它的复杂在于插件很多都是英文的,比较难看懂,锻炼英文水平挺好~还有就是当多个插件混合使用的时候,尤其是使用了yeoman,下次我就会学习使用了yeoman以后再使用grunt.到时候再来写博客.