grunt构建前端自动化

一.grunt是基于nodejs的，所以首先我们需要安装node

二.全局安装grunt 可以参考 http://www.gruntjs.net/docs/getting-started/

进行安装.

1.全局安装

npm install -g grunt-cli

2.进入当前项目根据配置文件

package.json

进行本地安装，或者直接把以前项目所有用过的本地安装文件直接复制到当前项目使用

3.任务设置

打开gruntfile.js进行设置

module.exports = function (grunt) {
    // 任务配置,所有插件的配置信息
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        //1.先清空发布文件夹
        clean: {
            src: ["publish/"]
        },
        //2.复制到发布文件夹 不要破坏源文件
        copy: {
            main: {
                files: [
                    { src: 'assets/**', dest: 'publish/' },
                  //  { src: 'assets/*.html', dest: 'publish/assets/' },
                ]
            }
        },
        //3.进行合并
        concat: {
            js:{
                dest: 'publish/tmp/concat/js/app.js',
                src: ['publish/assets/js/*.js']
            },
            css:{
                dest: 'publish/tmp/concat/css/app.css',
                src: ['publish/assets/css/*.css']
            }

        },
        //4.进行压缩
        uglify: {
            main: {
                files: [
                  {

                      //dest: 'publish/js/app.min.js',
                      //src: 'publish/tmp/concat/js/app.js'
                      expand: true,
                      cwd: "assets/js",
                      ext: ".min.js",
                      src: '**/*.js',
                      dest: 'publish/js'

                  }
                ]
            }
        },
        cssmin: {
            main:{
                files: [
                    {
                        //dest: 'publish/css/app.min.css',
                        //src: 'publish/tmp/concat/css/app.css'
                        expand: true,
                        cwd: "assets/css",
                        ext: ".min.css",
                        src: '**/*.css',
                        dest: 'publish/css'
                    }
                ]
            }
        },
        //4.进行hash运算重命名文件
        rev: {
            options: {
                algorithm: 'md5',
                length: 8
            },
            files: {
                src: ['publish/assets/js/*.js', 'publish/assets/css/*.css'],
            }
        },
        //5.替换静态资源链接
        useminPrepare: {
            src: "publish/assets/*.html"
        },
        usemin: {
            html: 'publish/assets/*.html',
        }
    });

    // 告诉grunt我们将使用插件
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-rev');
    grunt.loadNpmTasks('grunt-usemin');

    // 告诉grunt当我们在终端中输入grunt时需要做些什么
    grunt.registerTask('default', ['clean', 'copy', 'uglify', 'concat', 'cssmin', 'rev', 'usemin']);

};

 

参考链接

http://www.hulufei.com/post/grunt-introduction