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

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"]);}

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