项目自动化构建工具 - grunt

Grunt是一个自动化的项目构建工具。 如果你需要重复的执行像压缩， 编译， 单元测试， 代码检查以及打包发布的任务。 那么你可以使用Grunt来处理这些任务， 你所需要做的只是配置好Grunt， 这样能很大程度的简化你的工作。

使用grunt前需要安装node，npm。

一、安装grunt

需要全局安装grunt-cli

npm install -g grunt-cli

局部安装前需要添加一个json配置文件：package.json

编写内容如下：

{
  "name": "grunt_test",
  "version": "1.0.0",
}

局部安装grunt

npm install grunt --save-dev

安装完成后，查看 package.json文件会发现配置内容如下：可查看安装的插件版本号

{
  "name": "grunt_test",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^1.0.4",
  }
}

二、grunt的配置文件：

新建Gruntfile.js（首字母需大写）

配置基本内容：

module.exports = function (grunt) {

    // 初始化配置
    grunt.initConfig({});


    // 加载任务需要的插件
    grunt.loadNpmTasks('插件名称'); 

    // 注册默认任务
    grunt.registerTask('default',[]);

};

运行grunt：

grunt

三、合并 js

需要安装插件： grunt-contrib-concat

npm install grunt-contrib-concat --save-dev

配置：

module.exports = function (grunt) {

    // 初始化配置
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            dist:{
                src: 'js/*.js',                // 获取需要合并的所有源文件
                dest: 'dist/js/build.js'       // 合并后的输出路径
            }
        },
    });


    // 加载任务需要的插件
    grunt.loadNpmTasks('grunt-contrib-concat'); // 加载js合并插件

    // 注册默认任务
    grunt.registerTask('default',['concat']);

};

四、压缩 js

需要安装的插件：grunt-contrib-uglify

npm install grunt-contrib-uglify --save-dev

配置：

module.exports = function (grunt) {

    // 初始化配置
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            build: {
                files: {
                    'dist/js/build.min.js': 'dist/js/build.js'    // 前为压缩后输出路径， 后为需要压缩的源文件
                }
            }
        },
    });


    // 加载任务需要的插件
    grunt.loadNpmTasks('grunt-contrib-uglify'); // 加载js压缩插件

    // 注册默认任务
    grunt.registerTask('default',['uglify']);

};

五、合并后压缩css

需要安装的插件：grunt-contrib-cssmin

npm insttall grunt-contrib-cssmin --save-dev

配置：

module.exports = function (grunt) {

    // 初始化配置
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        cssmin: {
            build: {
                files: {
                    'dist/css/build.min.css': 'css/*.css'    // 前为合并压缩后的输出路径，后为需要合并压缩的所有源文件
                }
            }
        },


    // 加载任务需要的插件
    grunt.loadNpmTasks('grunt-contrib-cssmin'); // 加载css合并压缩插件（合并后再压缩）

    // 注册默认任务
    grunt.registerTask('default',['cssmin']);

};

六、压缩html文件

需要安装的插件：grunt-contrib-htmlmin

npm install grunt-contrib-htmlmin --save-dev

配置：

module.exports = function (grunt) {

    // 初始化配置
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        htmlmin: {
            dist : {
                options: {
                    removeComments: true, //删除注释
                    collapseWhitespace: true //删除标签间的空格
                },
                files : [{
                    expand : true,
                    cwd : './',     // 需要压缩的源文件目录
                    src : ['*.html'],   // 目录下的所有.html的文件
                    dest : 'dist/'  // 压缩后输出的路径
                }]
            }
        },


    // 加载任务需要的插件
    grunt.loadNpmTasks('grunt-contrib-htmlmin'); // 加载html压缩插件

    // 注册默认任务
    grunt.registerTask('default',['htmlmin']);

};

 

七、热更新，监视文件更新，检测css,js,html有修改时自动执行合并压缩编译等操作，并且自动刷新浏览器中已打开的页面

需要安装的插件：grunt-contrib-watch

npm install grunt-contrib-watch --save-dev

配置：

module.exports = function (grunt) {

    // 初始化配置
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            dist:{
                src: 'js/*.js',
                dest: 'dist/js/build.js'
            }
        },
        uglify: {
            build: {
                files: {
                    'dist/js/build.min.js': 'dist/js/build.js'
                }
            }
        },
        cssmin: {
            build: {
                files: {
                    'dist/css/build.min.css': 'css/*.css'
                }
            }
        },
        htmlmin: {
            dist : {
                options: {
                    removeComments: true, //删除注释
                    collapseWhitespace: true //删除标签间的空格
                },
                files : [{
                    expand : true,
                    cwd : './',     // 在什么目录下去找
                    src : ['*.html'],   // 目录下的所有.html的文件
                    dest : 'dist/'  // 压缩后输出指定的文件下
                }]
            }
        },
        watch: {
            script: {
                files: ['js/*.js', 'css/*.css', '*.html'],
                tasks: ['concat','uglify','cssmin','htmlmin'],
                options: {spawn: false} // 全量更新（有文件改动时是否全部更新，一般不必要）
            }
        }

    });


    // 加载任务需要的插件
    grunt.loadNpmTasks('grunt-contrib-concat'); // 加载js合并插件
    grunt.loadNpmTasks('grunt-contrib-uglify'); // 加载js压缩插件
    grunt.loadNpmTasks('grunt-contrib-cssmin'); // 加载css合并压缩插件（合并后再压缩）
    grunt.loadNpmTasks('grunt-contrib-htmlmin'); // 加载html压缩插件
    grunt.loadNpmTasks('grunt-contrib-watch');  // 加载监视刷新的插件（代码修改时会自动更新，执行压缩合并等操作）

    // 注册默认任务
    grunt.registerTask('default',['concat','uglify','cssmin','htmlmin','watch']);

};

 

 

注：不喜勿喷，欢迎讨论