GruntJS前端自动化构建之旅-齐飞.pptVIP

—— 初探Grunt 构建工具 Grunt实例讲解 - 配置 将包含所需插件node_modules文件夹和package.json复制到项目的根目录 配置Gruntfile.js，内容如下所示： module.exports = function(grunt) { grunt.initConfig({ uglify:{ options:{/* 相关配置请参见之前的页面 */}, minify:{/* 相关配置请参见之前的页面 */}, dynamic:{ expand: true,ext: .min.js,src: }}, sass:{ compile: { files: [{ expand:true, src: [*.scss], cwd: WebApp/res/theme/, dest: WebApp/res/theme/, ext: .css}]}, dynamic: { expand:true,ext:.css, src:}}, concat:{ options:{separator:;}, target:{ src:[WebApp/res/**/*.min.js], dest:WebApp/res/full.js}}, watch:{ js:{ files:[WebApp/res/**/*.js, !**/*.min.js,!**/full.js], tasks:[uglify:dynamic], options:{spawn:false}}, sass: { files:[WebApp/res/**/*.scss], tasks:[sass:dynamic], options:{spawn:false}}}}); // 对插件进行加载声明 grunt.loadNpmTasks(grunt-contrib-uglify); grunt.loadNpmTasks(grunt-contrib-sass); grunt.loadNpmTasks(grunt-contrib-concat); grunt.loadNpmTasks(grunt-contrib-watch); // 定义任务 grunt.registerTask(init,[uglify:minify,sass:compile,watch]); grunt.registerTask(combo,[concat]); // 我们利用GruntAPI进行了扩展 // 检测到文件变更时 取出该文件路径 grunt.event.on(watch, function(action,filepath){ grunt.log. writeln(---Found: + filepath + has changed, processing...); grunt.config(uglify.dynamic.src,filepath); grunt.config(sass.dynamic.src,filepath); }); }; Grunt实例讲解 - 运行init任务 刚才，我们在Gruntfile.js中配置了两个Task：init和combo。 在命令行输入grunt init，执行init任务： Fei@FEI-PC ~/Dropbox/Codes/workspace/EasyTools $ grunt init Running uglify:processAll (uglify) task File WebApp/res/common/a.min.js created. File WebApp/res/common/common.min.js created. File W