requirejs + sass 实现的前端及 grunt 自动化构建

对于 现在的 vue 、 react 、webpack 来说也许有点旧了，有时候，越简单的技术越可靠，备份一下

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        compass: {
            development: {
                options: {
                    generatedImagesDir:'public/src/slice',//合并后的雪碧图dir
                    imagesDir:'public/src/slice', //雪碧图合并前图片碎片dir
                    sassDir: 'public/src/sass',
                    cssDir: 'public/src/sass-css',
                    outputStyle:'compressed',//CSS output mode. Can be: nested, expanded, compact, compressed.
                    force:false
                }
            }
        },

        sprite: {
            options: {
                // sprite背景图源文件夹，只有匹配此路径才会处理，默认 images/slice/
                imagepath: 'public/src/slice/',
                // 雪碧图输出目录，注意，会覆盖之前文件！默认 images/
                spritedest: 'public/src/css/',
                // 替换后的背景路径，默认 ../images/
                spritepath: 'img/',
                // 各图片间间距，如果设置为奇数，会强制+1以保证生成的2x图片为偶数宽高，默认 0
                padding: 2,
                // 是否以时间戳为文件名生成新的雪碧图文件，如果启用请注意清理之前生成的文件，默认不生成新文件
                newsprite: false,
                // 版本号 ver 未设置时，是否给雪碧图追加时间戳，默认不追加
                spritestamp: true,
                // 在CSS文件末尾追加时间戳，默认不追加
                cssstamp: false,
                // 默认使用二叉树最优排列算法
                algorithm: 'binary-tree',
                // 默认使用`pngsmith`图像处理引擎
                engine: 'pngsmith',

                //版本号
                ver:new Date().toISOString().replace(/\D/g,'')
            },
            autoSprite: {
                files: [{
                    expand: true,
                    cwd: 'public/src/sass-css/',
                    src: '**/*.css',
                    dest: 'public/src/css/',
                    ext: '.css'
                }]
            }
        },

        imagemin: {
            dynamic: {
                options: {
                    optimizationLevel: 3 // png图片优化水平，3是默认值，取值区间0-7
                },
                files: [
                    {
                        expand: true,
                        cwd: "public/src/css/img/",  //只压缩 sprite产生的合并图片
                        src: "**/*.png",
                        dest: "public/src/css/img/"
                    }
                ]
            }
        },

        clean: {
            sassCss:{
                src:["public/src/sass-css/*"]
            },
            css: {
                src: ['public/src/css/*']
            },
            js:{
                src:['public/dist/js/*']
            }
        },
        copy: {
            font: {
                expand: true,
                cwd: 'public/src/font',
                src: '**',
                dest: 'public/font'
            },
            css: {
                expand: true,
                cwd: 'public/src/css/',
                src: '**',
                dest: 'public/dist/css/'
            }
        },

        babel: {
            options: {
                presets: ['env'],//the same as latest,including es2015，es2016，es2017 plugins
                plugins: ["transform-es2015-modules-amd"],//import file translate to amd module
                sourceMap: true
            },
            files: {
                expand: true,
                cwd: 'public/src/babel/es6/', //just a test  now
                src: ['**/*.js'],
                dest: 'public/src/babel/es5/'
            }
        },

        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
                sourceMap: true,
                mangle: false, //不混淆变量名
                comments: 'some' //保留 @preserve @license @cc_on等注释
            },
            build: {
                files:[{
                    expand: true,
                    cwd: 'public/src/js',
                    src: '**/*.js',
                    dest: 'public/dist/js',
                    ext: '.js',
                    extDot: 'last'
                }]
            }
        },

        requirejs: {
            build: {
                options : {
                    optimize:'none',   //指定压缩工具,none 不压缩
                    baseUrl : 'public/dist/js',//在压缩后的模块上进行文件合并
                    mainConfigFile: 'public/dist/js/require.config.js',
                    dir:"public/dist/js",//输出文件夹
                    keepBuildDir:true,//构建过程中勿删除重建dir文件夹
                    allowSourceOverwrites:true,//dir文件夹与源文件夹相同时允许重写构建前的文件
                    removeCombined: false,
                    findNestedDependencies:false,
                    optimizeCss:'none',
                    modules:[
                        {
                            /******
                            该合并后的模块几乎在每个页面都使用到,将作为公用模块，请确保该模块先于页面js文件引入，避免重复加载已合并的文件,
                            由于requirejs模块默认加载没有顺序，该模块置入 views/component/foot.ejs，少数未引用foot的页面请单独处理,
                            page/head.js 不是使用 require 的模块或其依赖引入,请声明为具名模块(define("page/head",[xxx,xxx],function(){}))以避免开发模式下模块未合并时报错
                            *********/
                            name:"page/head",
                            create: false
                        },
                        {
                            name:'ui/ui',
                            include:["ui/ux","ui/ejs","ui/tpl"],
                            exclude:["jquery","pin","request"],
                            create: false
                        },
                        {
                            name:'highstock',
                            include:["raphael","chart/maps/chinaMap"],
                            exclude:["jquery"],
                            create: false
                        },
                        {
                            name:"common/common",
                            include:["jquery","pin","request","common/common","common/gapageview"],
                            excludeShallow:["ui/ux","ui/ejs","ui/tpl"],
                            create: false
                        },
                        {
                            name:'page/analyze/analyze_report',
                            include:['page/analyze/report/step1','page/analyze/report/step2Major','page/analyze/report/step2Sch'],
                            exclude:["jquery","pin","request","ui/ux","ui/ejs","ui/tpl","common/common","page/head"],
                            create: false
                        },
                        {
                            name:'page/zhiyuan/zhiyuan',
                            include:["page/zhiyuan/list/selectArea","widget/page","common/fixBottom"],
                            exclude:["jquery","pin","request","ui/ux","ui/ejs","ui/tpl","common/common","page/head"],
                            create: false
                        }
                    ]
                }
            }
        },

        watch: {
            options: {
                spawn:true,
                interrupt:true,
                debounceDelay: 250
            },
            sass:{
                files: 'public/src/sass/**/*.scss',
                tasks: [/*"clean:sassCss",*/"clean:css","compass","sprite"]
            },
            babel:{
                files:'public/src/babel/es6/**/*.js',
                tasks:['babel']
            }
        }

    });

    // 加载任务的插件
    //css
    //node-compass requires compass and ruby gem , install ruby then install compass via gem
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-cssprite');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');

    //js
    grunt.loadNpmTasks('grunt-babel');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-requirejs');

    //watch
    grunt.loadNpmTasks('grunt-contrib-watch');

    //开发期的编译任务
    grunt.registerTask('default', [
        "clean:sassCss",
        "clean:css",
        "compass",
        "sprite",
        "babel"
        ]);

    //开发中监控,自动编译 (有点频繁 酌情开启)
    grunt.registerTask('watcher',['watch']);

    //压缩及发布
    grunt.registerTask('dist',["imagemin","copy","clean:js","uglify","requirejs"]);

    //test task
    grunt.registerTask('test',[/*"clean:js","uglify",*/"requirejs"]);
}

package.json

 "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-babel": "^7.0.0",
    "grunt-contrib-clean": "~0.4.0",
    "grunt-contrib-copy": "~0.5.0",
    "grunt-contrib-cssprite": "~0.1.3",
    "grunt-contrib-imagemin": "~2.0.1",
    "grunt-contrib-jshint": "~0.6.0",
    "grunt-contrib-requirejs": "^1.0.0",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-contrib-watch": "~1.0.0",
    "grunt-contrib-compass": "~0.7.2"
  }