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