GruntJS常用前端流程自动化配置-【持续优化】

前言

近期用Grunt进行前端开发经常要用到的一些Grunt插件，用起来非常顺手。

一、package.json文件配置如下：

包括coffeescript编译为js，css加CSS3适配前缀，css合并，less样式编译为css，自动监视变化进行编译处理等等

{
  "name": "myApp",
  "version": "0.1.0",
  "description": "myApp",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Nelson",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-coffee": "0.7.x",
    "grunt-autoprefixer": "^3.0.3",
    "grunt-contrib-concat": "~0.4.0",
    "grunt-contrib-less": "~0.11.0",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-html-build": "~0.3.2"
  }
}

二、Gruntfile.js文件配置如下：

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                banner: '/*! myapp.ui.css@<%= pkg.name %> - v<%= pkg.version %> - ' +
                        '<%= grunt.template.today("yyyy-mm-dd") %> */'
            },
            mobileLess: {
                src: ['src/less/*.less'],
                dest: 'src/less/myapp.common_grunt.less',
            }
        },
        less: {
            development: {
                options: {
                    compress: false,
                    yuicompress: false
                },
                files: {
                    "dist/css/myapp.ui.css": "src/less/myapp.ui.less",
                    "dist/css/myapp2.ui.css": "src/less/myapp2.ui.less",
                    "dist/css/myapp.common_grunt.css": "src/less/myapp.common_grunt.less"
                }
            },
            production: {
                options: {
                    compress: true,
                    yuicompress: true,
                    optimization: 2
                },
                files: {
                    "dist/css/myapp.ui.min.css": "src/less/myapp.ui.less",
                    "dist/css/myapp2.ui.min.css": "src/less/myapp2.ui.less",
                    "dist/css/myapp.common_grunt.min.css": "src/less/myapp.common_grunt.less"
                }
            }
        },
        autoprefixer: {
            development: {
                files: {
                    'dist/css/build/myapp.ui.css': 'dist/css/myapp.ui.css',
                    'dist/css/build/myapp2.ui.css': 'dist/css/myapp2.ui.css'
                }
            },
            production: {
                files: {
                    'dist/css/build/myapp.ui.min.css': 'dist/css/myapp.ui.min.css',
                    'dist/css/build/myapp2.ui.min.css': 'dist/css/myapp2.ui.min.css'
                }
            }
        },
        coffee: {
            glob_to_multiple: {
                expand: true,
                flatten: true,
                cwd: 'static',
                src: ['src/coffee/*.coffee'],
                dest: 'dist/js',
                ext: '.js'
            }
        },
        watch: {
            options: {
                livereload: true
            },
            grunt: {
                files: ['Gruntfile.js']
            },

            styles: {
                files: [
                        'src/less/*.less',
                        'src/less/**/*.less',
                        'src/less/***/**/*.less',
                        'dist/css/*.css'
                ],
                tasks: [
                        'concat:mobileLess',
                        'less',
                        'autoprefixer'
                ],
                options: {
                    nospawn: true
                }
            },
            scripts: {
                files: 'src/coffee/*.coffee',
                tasks: ['coffee']
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-autoprefixer');
    grunt.loadNpmTasks('grunt-contrib-coffee');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.registerTask('default', ['watch']);
};

 20151126增加CSS压缩

cssmin: {
            options: {
                keepSpecialComments: 0
            },
            compress: {
                files: {
                    'css/pub/default.min.css': [
                        "css/layout.css",
                        "css/style.css",
                        "css/pub/double11.common.min.css"
                    ]
                }
            }
        },

    grunt.loadNpmTasks('grunt-contrib-cssmin');

 20160114增加js压缩

        uglify: {
            //文件头部输出信息
            production: {
                options: {
                    mangle: true //混淆变量名
                },
                files: {
                    'dist/js/a.min.js': 'dist/js/a.js',
                    'dist/js/b.min.js': 'b.js'
                }
            }
        },

watch添加

,
            js: {
                files: ['dist/js/*.js', 'dist/js/**/*.js'],
                tasks: ['uglify']
            }

加载任务

grunt.loadNpmTasks('grunt-contrib-uglify');