在項(xiàng)目根目錄執(zhí)行以下命令,安裝gulp到你的項(xiàng)目目錄
npm install --save-dev gulp
生成gulpfile.js撼嗓,代碼如下
var gulp = require('gulp'),
concat = require("gulp-concat");
//新建一個(gè)名稱為one的異步任務(wù)
gulp.task('one',function(cb){ //cb為任務(wù)函數(shù)提供的回調(diào)柬采,用來通知任務(wù)已經(jīng)完成
//one是一個(gè)異步執(zhí)行的任務(wù)
setTimeout(function(){
console.log('one is done');
cb(); //執(zhí)行回調(diào),表示這個(gè)異步任務(wù)已經(jīng)完成
},5000);
});
//reload任務(wù)依賴one任務(wù)
gulp.task('reload',['one'], function () {
//do something
console.log('reload');
});
//default為入口函數(shù),gulp中必須有這個(gè)任務(wù)方能正常運(yùn)行
gulp.task('default', function () {
//將源文件routes目錄下的js文件合并成all.js文件,然后復(fù)制到dist/js目錄下
gulp.src('routes/*.js') //要合并的文件
.pipe(concat('all.js')) // 合并匹配到的js文件并命名為 "all.js"
.pipe(gulp.dest('dist/js'));
//watch的時(shí)候保持控制臺(tái)開啟,否則無法生效
//監(jiān)聽routes文件夾下的js文件,發(fā)生變化后執(zhí)行one任務(wù)然后執(zhí)行uglify任務(wù),最后執(zhí)行
// reload任務(wù),one任務(wù)的這種寫法可以確保,one,和uglify,reload是順序執(zhí)行的
gulp.watch('routes/*.js', ['reload']);
});
cd到項(xiàng)目根目錄且警,執(zhí)行
gulp
不要關(guān)閉控制臺(tái)粉捻,試著修改routes目錄下的js文件,觀察控制臺(tái)的變化斑芜,然后重讀gulpfile.js代碼