gulp实时编译less，压缩合并requirejs模块文件
gulp的使用命令简单，就几个，gulp的简单使用教材可以参考一点的gulp使用教材（http://www.ydcss.com/archives/18）。
下面就简单的介绍这些命令如何互相配合的完成前端的构建工作。
项目结构：
首先全局安装gulp，使用命令：npm install -g gulp
一：gulp实时编译less
var gulp = require('gulp');
var gulpLess = require('gulp-less');
var gulpMinifyCss = require('gulp-minify-css');
var gulpSourcemaps = require('gulp-sourcemaps');
这4个插件就是目前用到的，需要其他功能可以自己添加。gulp-less是编译less用的插件，gulp-minify-css是压缩css的插件，gulp-sourcemaps是便于压缩后代码调试的。
gulp.task('allLess', function(){
gulp.src('src/less/**/*.less')
.pipe(gulpSourcemaps.init())//sourcemaps
.pipe(gulpLess())//编译less
.pipe(gulpSourcemaps.write())
.pipe(gulp.dest('src/css/'))
.pipe(gulpMinifyCss())//压缩css
.pipe(gulpSourcemaps.write())
.pipe(gulp.dest('dist/css/'));
});
gulp.watch('src/less/**/*.less', ['allLess']);
gulp.task('default', ['allJs', 'allLess']);
gulp.src('src/less/**/*.less')：src/less/下任意目录下的less文件，**代表任意单个或多个目录，*.less表示已less后缀结尾的文件。
gulp.watch('src/less/**/*.less', ['allLess']);这条是监听src/less目录下的任意less文件的变化，有变化就会调用allLess任务编译变化的less文件。
gulp实时编译less就是这么简单了。还可以加入对图片的压缩控制。
二：gulp压缩合并requirejs加载的js模块文件
在前端代码量越来越多的情景下，js模块化编程孕育而生，AMD模式的模块采用requirejs来加载模块。模块化编程让前端js代码规范整洁之外，也导致了浏览器对
js请求数量增多，这个时候，就需要对相应的模块进行合并，并且压缩代码，减少请求，缩短页面响应时间。
一些需要的模块：
var fs = require('fs'); var paths = require('path'); var rjs = require('requirejs');
合并压缩用的是requirejs的optimize方法,
先定义一些变量：
// 配置目录 var jsDir = 'src/js'; // 所有要编译的js模块 var jsModules = [], ctrlModules = [], commModules = [ { name: "lib/common", exclude: [] } ];
合并压缩代码的思路就是要告诉requirejs哪些模块需要合并到文件中，哪些模块要单独打包，不用合并到文件中，并且单独请求。也就是要先遍历你的逻辑js文件，
把名称和需要过滤的模块名称存到变量中，然后传递给requirejs的optimize方法。下面是变量controller下的js文件。
// 初始化controller下所有要编译的js模块 function initJsPath(path){ path = path || jsDir + '/controller'; var files = fs.readdirSync(path);/*读取目录下的所有文件名称，返回名称数组，如果文件名是目录，该目录下面的文件不会读取*/ console.log(files); files.forEach(function(item) { var tmpPath = path + '/' + item, stats = fs.statSync(tmpPath); if (stats.isDirectory()) {//目录 initJsPath(tmpPath); } else {//文件 if (tmpPath.slice(-3)=='.js') { ctrlModules.push({ name: tmpPath.slice(jsDir.length + 1, -3), exclude: ['lib/common'] }); } } }); console.log(ctrlModules); }
gulp中定义的任务是：
gulp.task('allJs', function(cb){
console.log('======================================= start optimize js ==========================================');
//收集js文件名称
initJsPath();
jsModules = commModules.concat(ctrlModules);
rjs.optimize({
baseUrl: 'src/js',
dir: 'dist/js',
findNestedDependencies : false, //代码内部写的require也计算在打包内
preserveLicenseComments : false, //去掉头部版权声明
removeCombined: false, //自动删除被合并过的文件
modules: jsModules
}, function(){
cb();
}, cb);
});
baseUrl目录下的文件都会被压缩，modules中的模块会被合并并且压缩，合并压缩后存储到dist/js目录下面。commModules中存储的是我们项目的公共模块文件，
需要单独合并压缩抽离出来，这个文件不会被合并到其他模块文件中，而且会被单独请求。相关参数的配置信息大家可以看官网。
下面看看实验:
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script> window.ENV = 1; </script> <body> <p class="msg">hello rjs</p> </body> <script src="src/js/require.js"></script> <script> require(['src/js/config.js'], function(){ require(['controller/order/orderDetail']); }); </script> </html>
requirejs 的config配置文件：
/** * Created by jiaan.zhou on 2017/2/3. */ var BASEURL = ((window.ENV == 1) || (window.ENV == 2 && location.hash === '#debugon')) ? 'src/js': 'dist/js'; require.config({ waitSeconds: 2000, baseUrl : BASEURL, paths : {}, urlArgs : 'v=' + new Date().getTime() });
没有合并的orderDetai.js文件：
/** * Created by jiaan.zhou on 2017/2/3. */ define('controller/order/orderDetail', ['widget/swipe'], function(widgetSwipe){ console.log('controller/order/orderDetail'); $('.msg').html('success'); });
合并后的orderDetai.js文件：
define("widget/swipe",["lib/common"],function(e){function o(){this.name="swipe",console.log("hello swipe")}return new o}),define("controller/order/orderDetail",["widget/swipe"],function(e){console.log("controller/order/orderDetail"),$(".msg").html("success")});
没有合并模块之前的请求：
从图中我们可以看到所有的模块按照加载顺序进行请求，每个模块对应一个请求。
合并模块后的请求：
合并后，swipe模块已经合并到orderDetai文件中，zepto和fastclick模块合并到commonjs文件中，这样就减少的请求，而且代码也得到压缩。
写的不好，还请大家多多指正，任何问题请联系：QQ 272318930
