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