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