前端自动化grunt的使用

　　作为前端开发人员，有必要也有义务掌握前端自动化工具grunt；

这样可以极大地降低前端的复杂工作，提高工作效率，把所有的精力都投入到

编码中去。

grunt API列表

• config
• event
• fail
• file
• log
• option
• task
• template
• util

在使用grunt构建前端自动化中，我主要使用的config、file、template以及util这几个API。

现在贴一份gruntfilejs代码，基本上前端的自动化工作都可以完成：

‘use strict‘

var ASSETS_DIR = ‘assets/‘;
module.exports = function(grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON(‘package.json‘),

        /* jsdoc生成js文档 */
        jsdoc: {
            dist: {
                src: [‘assets/scripts/test.js‘],
                options: {
                    destination: ‘docs‘
                }
            }
        },

        /* css代码合并 */
        concat: {

        }
    });

    /*grunt-contrib-less模块,使用less预编译css文件*/
    grunt.config.merge({
        less: {
            dev: {
                files: [{
                    expand: true,
                    cwd: ASSETS_DIR + ‘less/‘ + ‘./‘,
                    src: [‘*.less‘],
                    dest: ASSETS_DIR + ‘css‘,
                    ext: ‘.css‘
                }]
            },
            bootstrap: {
                files: {
                    ‘assets/css/bootstrap.css‘: ‘assets/less/bootstrap/bootstrap.less‘
                }
            }
        }
    });

    /*grunt-contrib-sprite模块,生成雪碧图*/
    grunt.config.merge({
        sprite: {
            options: {
                banner: ‘/*<%=pkg.name %> <%=grunt.template.today("yyyy-mm-dd")%>*/‘
            },
            all: {
                src: [ASSETS_DIR + "images/sprites/*.png"],
                engine: require(‘pixelsmith‘),
                dest: ASSETS_DIR + "images/sprite.png",
                destCss: ASSETS_DIR + "css/sprite.css",
                padding: 10,
                algorithm: "binary-tree",
                cssVarMap: function(sprite) {
                    var iconIndex, activeIndex;
                    iconIndex = sprite.name.indexOf(‘icon-‘);
                    activeIndex = sprite.name.lastIndexOf(‘-active‘);
                    if (activeIndex > 0) {
                        // sprite.name=sprite.name.replace(sprite.name.substr(activeIndex),":active");
                    }
                    if (iconIndex === 0) {
                        sprite.name = sprite.name.replace(sprite.name.substr(0, 5), ‘‘);
                    }
                }
            }
        }
    });

    /*grunt-contrib-cssmin模块,压缩css文件*/
    grunt.config.merge({
        cssmin: {
            add_banner: {
                options: {
                    banner: ‘/* minify the css file <%= grunt.template.today("yyyy-mm-dd") %> */‘
                },
                files: {
                    ‘assets/css/output.css‘: [ASSETS_DIR + ‘css/bootstrap.css‘, ASSETS_DIR + ‘css/home.css‘]
                }
            },
            minify: {
                options: {
                    banner: ‘/* minify the css file\n Author:lidasong\n Time: <%= grunt.template.today("yyyy-mm-dd") %>*/‘
                },
                expand: true,
                cwd: ASSETS_DIR + ‘dest/css/‘,
                src: [‘*.css‘, ‘!*.min.css‘],
                dest: ASSETS_DIR + ‘dest/release‘,
                ext: ‘.min.css‘
            }
        }
    });

    /**js、css代码检测工具，
     *grunt-contrib-jshint模块、grunt-contrib-csslint模块
     **/
    grunt.config.merge({
        jshint: {
            all: {
                options: {
                    ‘-W069‘: true,
                    ‘-W064‘: true,
                    ‘-W040‘: true
                },
                src: [‘assets/scripts/*.js‘, ‘assets/scripts/module/*.js‘, ‘assets/scripts/util/*.js‘]
            }
        },
        csslint: {
            strict: {
                options: {
                    import: false
                },
                src: [ASSETS_DIR + ‘css/*.css‘]
            }
        }
    });

    /*grunt-contrib-uglify模块,压缩js文件*/
    grunt.config.merge({
        uglify: {
            jscomp: {
                files: [{
                    expand: true,
                    cwd: ASSETS_DIR + ‘scripts‘,
                    src: ‘**/*.js‘,
                    dest: ASSETS_DIR + ‘dest/scripts‘
                }]
            }
        },
    });

    /*grunt-contrib-copy模块,文件复制*/
    grunt.config.merge({
        copy: {
            release: {
                options: {
                    process: function(content, srcpath) {},
                    timestamp: true
                },
                expand: true,
                cwd: ASSETS_DIR + ‘dest/‘,
                src: [‘**‘],
                dest: ASSETS_DIR + ‘release‘
                // flatten:true,
                // filter:‘isFile‘
            }
        }
    });

    /*grunt-contrib-clean模块,清除文件*/
    grunt.config.merge({
        clean: {
            concatCss: {
                options: {
                    force: true
                },
                src: [ASSETS_DIR + ‘dest/css/‘]
            },
            miniCss: {
                options: {
                    force: true
                },
                src: [ASSETS_DIR + ‘dest/release/‘]
            }
        }
    });

    /*grunt-contrib-watch模块,监控文件变化*/
    grunt.config.merge({
        watch: {
            ‘less-dev‘: {
                files: [ASSETS_DIR + ‘less/*.less‘, ASSETS_DIR + ‘less/partials/**/*.less‘],
                tasks: [‘less:dev‘]
            },
            ‘less-bootstrap‘: {
                files: [ASSETS_DIR + ‘less/lib/bootstrap/**/*.less‘],
                tasks: [‘less:bootstrap‘]
            }
        }
    });
    /*grunt-contrib-*模块加载*/
    require(‘load-grunt-tasks‘)(grunt);

    /*grunt注册任务列表*/
    grunt.registerTask(‘default‘, [‘less:dev‘, ‘watch:less-dev‘]);
    grunt.registerTask(‘bootstrap‘, [‘less:bootstrap‘]);
    grunt.registerTask(‘js-hint‘, ‘JS代码质量检查‘, [‘jshint‘]);
    grunt.registerTask(‘css-lint‘, ‘CSS代码质量检查‘, [‘csslint‘]);
    grunt.registerTask(‘all-concat‘, ‘css 代码合并‘, [‘clean:concatCss‘, ‘css-concat‘, ‘concat‘]);
    grunt.registerTask(‘minify-css‘, ‘CSS代码压缩‘, [‘clean:miniCss‘, ‘cssmin:minify‘]);
    grunt.registerTask(‘doc‘, ‘jsdoc生成js文档‘, [‘jsdoc‘]);
    grunt.registerTask(‘sprites‘, ‘生成雪碧图‘, [‘sprite:all‘]);
    grunt.registerTask(‘js-comp‘, ‘压缩js代码‘, [‘uglify:jscomp‘]);
    grunt.registerTask(‘copyCss‘, ‘复制合并压缩后的css‘, [‘copy:release‘]);
    grunt.registerTask(‘css-concat‘, ‘css代码合并‘, function() {
        grunt.file.expand(ASSETS_DIR + ‘css/*‘).forEach(function(dir) {
            var dirName = dir.substr(0, dir.indexOf(‘.‘)),
                concat = grunt.config.get(‘concat‘) || {};
            dirName = dirName.substr(dirName.lastIndexOf(‘/‘) + 1);
            if (grunt.file.isFile(dir)&&dirName !== ‘bootstrap‘ && dirName !== ‘sprite‘) {
                concat[‘options‘] = {
                    stripBanners: true,
                    banner: ‘/*合并css后的代码*/‘
                };
                concat[dirName] = {
                    src: [dir, ASSETS_DIR + ‘css/bootstrap.css‘],
                    dest: ASSETS_DIR + ‘dest/css/‘ + dirName + ‘.css‘
                };
                grunt.config.set(‘concat‘, concat);
            }
        });
    });
};