GruntJS經常使用前端流程自動化配置-【持續優化】

前言

近期用Grunt進行前端開發常常要用到的一些Grunt插件，用起來很是順手。

1、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" } }

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');