看了网上很多关于grunt, gulp之类的文章, 都很推荐用后者, 但我想说的是谁有谁的优点, 最适合自己项目的才是真爱... (由于本人使用的是grunt, 本人介绍她相关的一些东东)

fsdf

grunt的优点

• 他的文档,API很全
• 开源的插件多
• 项目成熟,功能稳定

grunt的缺点

• 读取文件频繁(但感觉在酷睿的天下这都不是事了, 且借用去哪网某神的说法: 我们是SSD _)
• 为了完成需要编写大量任务逻辑js, 比如要做到 复制->编译->压缩->合并->监听->http最少需要100行代码

grunt demo

测试demo, 需要是把 src/js/ 下的所有js复制到 build/js/ 下,并把所有的js压缩成 *.min.js, 来看看任务配置吧... (代码能力有限)

// 包装函数
module.exports = function(grunt) {
 // 任务配置
 grunt.initConfig({
 pkg: grunt.file.readJSON('package.json'),//读取配置文件
 //复制
 copy: {
 demo: {
 files: [{
 expand: true,
 cwd: 'src/js/',//相对目录
 src: '**/*.js',//源文件
 dest: 'build/js/',//生成到的目录
 filter: 'isFile'
 }]
 }
 },
 //js压缩
 uglify: {
 demo: {
 files: [{
 expand: true,
 cwd: 'build/js/',//相对目录
 src: '**/*.js',//源文件
 dest: 'build/js/',//生成到的目录
 filter: 'isFile',
 ext: '.min.js'
 }]
 }
 }
 });
 // 加载连接文件插件
 grunt.loadNpmTasks('grunt-contrib-copy');//复制
 grunt.loadNpmTasks('grunt-contrib-uglify');//js压缩
 // 测试合并任务
 grunt.registerTask('default', ['copy:demo', 'uglify:demo']);
}

然后cmd运行grunt搞定, 当然你必须得有环境和依赖包...

这只是一个小小的需求, 如果说有很多需求,比如各种合并,跨路径压缩,css处理,自动sprite,less,sass等需求, 那么你的任务js就越来越大... 且在团队开发中不太有利, 也会造成工作量加大... 我们该怎么解决呢... 愁... 但当某天我在github上见到一人设置 "动态任务" ,顿时眼前一亮, 然后...

动态设置任务

什么叫动态设置任务呢? 我给的定义是, 根据自己的需求, 来自动的生成任务并执行任务, 然后可以结合配置文件来快速的构建前端工具方案了...

我们这样定义:

• package.json 为配置文件,只要配置一些依赖包,版本号等

• app.json 为应用包, 主要编写实际的应用任务

app.json应用格式:

{
 "home": {//项目名
 "css": {//处理css
 "demo": {
 "src": "1.css"
 },
 "demo2": {
 "src": [
 "1.css", "2.css", "3.css"
 ]
 },
 "demo3": {
 "src": [
 '1.css',
 '2.css'
 ],
 "dest": 'global.css'
 },
 ...
 },
 "js": {//处理js
 ...
 }
 }
}

然后我们的任务是这样的:

/**
 * 初始化css
 * @description 如果配置有dest, 则把所有的src合并为dest
 */
grunt.registerTask("init-css", "初始化css", function(type, name, noSprite) {
 var result;
 app = 当前实例
 // 省略N多代码...
 //如果有依赖包
 if (app.dest) {
 result = {//提前声明好用
 dest: app.dest,
 }
 if (app.src) {//如果有源
 result.src = app.src;
 }
 }
 if(result && result.src){//如果有src才算真爱,
 //动态设置任务并执行
 grunt.config.set('concat.init', result);
 grunt.task.run('concat:init');
 } else {
 console.log("app."+ type +".css."+ name +" 包里没有配置源css值, 如: src");
 }
});
/**
 * 编译css
 * @description 负责把css编译到 build 目录,并压缩,合并
 */
grunt.registerTask("build-css", "编译css", function(type, name) {
 var result;
 app = 当前实例
 // 省略N多代码...
 //处理源到build, 但不压缩
 if(app.src){
 // 复制
 result = {
 files: [{
 expand: true,
 cwd: '源目录',
 src: app.src,
 dest: '编译目录',
 filter: 'isFile'
 }]
 }
 //动态设置任务并执行
 grunt.config.set('copy.src', result);
 grunt.task.run('copy:src');
 }
 if(app.dest){//如果有依赖处理
 result = {//提前声明好用
 dest: app.dest,
 }
 if (app.src) {//如果有源
 result.src = app.src;
 }
 if(result.src ){
 //合并
 grunt.config.set('concat.dest', result);
 grunt.task.run('concat:dest');
 //压缩
 grunt.config.set('cssmin.dest', {
 src: app.dest,
 dest: app.dest
 });
 grunt.task.run('cssmin:dest');
 }
 }
 if(app.src){//如果有源则压缩源
 grunt.config.set('cssmin.src', {
 files: [{
 expand: true,
 cwd: 编译目录,
 src: app.src,
 dest: 编译目录,
 filter: 'isFile'
 }]
 });
 grunt.task.run('cssmin:src');
 }
});

注: 以上代码只是事例说明, 具体代码视需求定!

动态设置任务的优化

• 只要需要开发模式后, 只需要配置应用包就可以各种帅
• 因为总入口是一个, so扩展性极强, 什么sprite, less,sass, http监听, 本地调度等一切不是梦

总结

我晕, 貌似说了很多费话, 其实核心的思路是: 根据应用配置文件来动态的设置任务! 对, 就这一句话... 但你可以扩展出自己项目所需的模式, 比如无敌模式, 自恋模式等...

最后致谢 grunt, nodejs 让前端更轻松!