再次查看你的web文件包
|- view
|-|- index.html
|-node_modules
|-less 新增一個less文件夾[1]
|-|- common.less
|-css 用于存放編譯完成的css文件
|- gulpfile.js
安裝對應(yīng)的gulp插件
這個時候請確認(rèn)你已經(jīng)把gulp安裝完成了曼振。
進(jìn)入控制臺锁荔，進(jìn)入對應(yīng)的項目地址
安裝gulp-less插件
npm install gulp-less //這個插件是用來編譯less的…
- 安裝gulp-concat插件
npm install gulp-concat //這個插件是用來把less編譯出來的css合并為一個css用的…
- 安裝gulp-plumber插件
npm install gulp-plumber //這個插件是用來處理管道崩潰問題的…
- 安裝gulp-notify插件
npm install gulp-notify //這個插件目的有兩個，一個是顯示報錯信息别厘，一個是報錯后不終止當(dāng)前gulp任務(wù)…
修改gulpfile.js文件
真正的自動化之路現(xiàn)在才開始
- 首先還是把需要用到的方法放到簡單的（你喜歡的）名字變量里
//我們新添加的一套插件怎棱，分為兩部分哩俭，一部分為了處理錯誤，一部分為了自動更新css文件（less編譯）
var less = require('gulp-less'); //less編譯
var concat = require('gulp-concat'); //文件合并
var plumber = require('gulp-plumber'); //處理管道崩潰問題
var notify = require('gulp-notify'); //報錯與不中斷當(dāng)前任務(wù)
- 編寫編譯less的任務(wù)
//less編譯
gulp.task('less',function(cb){
return gulp.src('less/common.less') //找到需要編譯的less文件蹄殃，所有l(wèi)ess文件就寫 less/*.less携茂，
.pipe(plumber({errorHandler: notify.onError('Error:<%= error.message %>;')})) //如果less文件中有語法錯誤，用notify插件報錯诅岩，用plumber保證任務(wù)不會停止
.pipe(less()) //如果沒錯誤讳苦，就編譯less
.pipe(concat('happyasyou.css')) //把編譯后的css合并為一個带膜，名字是你開心就好，如果不想合并鸳谜，就不寫這一行
.pipe(gulp.dest('css/')); //把css文件放到css文件夾下
});
- 監(jiān)聽less文件
此時我們已經(jīng)寫好了編譯方法膝藕，那么每次當(dāng)我們修改了less文件后都執(zhí)行一次方法則違背了我們做自動化的初衷，那么我們需要一個監(jiān)聽方法咐扭，每當(dāng)監(jiān)聽到less文件有變化則自動執(zhí)行編譯方法
gulp.task('watchLess',function(){
//監(jiān)聽所有l(wèi)ess文件芭挽，如果有變化，則執(zhí)行l(wèi)ess編譯方法
gulp.watch(['*/*.less'],['less']);
});
- 把監(jiān)聽任務(wù)追加到啟動服務(wù)器任務(wù)中
//第一種方法：將監(jiān)聽任務(wù)寫進(jìn)'woyaofuwuqi'任務(wù)中
//不推薦
gulp.task('woyaofuwuqi', function () {
//任務(wù)名稱不要有空格
connect.server({
liverload: true,port:9000 //端口號
});
gulp.watch(['*/*.html'],['qinghuancun']);
gulp.watch(['*/*.less'],['less']);
});
/***********************************************************/
//第二種方法：新建一個任務(wù)列表蝗肪，把監(jiān)聽任務(wù)與服務(wù)器任務(wù)都放在列表中
//推薦
gulp.task('taskList', ['woyaofuwuqi','watchHtml','watchLess']);
//修改默認(rèn)任務(wù)袜爪，按照順序做了的話，其實這次就不用改了薛闪。
gulp.task('default', function() {
// 測試一下
console.log('this is a new test page.');
//gulp.start('woyaofuwuqi');
gulp.start('taskList'); //執(zhí)行任務(wù)列表
});
- 查看你的成果
我們來寫一點(diǎn)less內(nèi)容在common.less里面
body{
color:#f0f;//瞎眼粉
background-color:#abc000; //屎黃色
/*這倆顏色真的丑爆了辛馆！*/
}
在命令行中進(jìn)入你的項目文件夾，輸入gulp豁延，打開你的項目文件夾昙篙，查看css目錄下是否生成了對應(yīng)的happyasyou.css文件，實時修改common.less文件诱咏，happyasyou.css文件會實時更新苔可。
最后文件包的地址放這里了。
-
在本文集中袋狞，我就以less為例講解如何自動編譯了焚辅，原因是因為我只會less，不會sass/scss硕并。 ?
