隨著項目的推進，gulpfile.js配置文件里的任務(wù)越來越多，為了后續(xù)的管理方便，把gulp各個任務(wù)抽離出來，單獨放在一個文件中。
在此之前，安裝gulp-load-plugins ?此插件是負責(zé)加載gulp所有插件 ?用cnpm安裝
在gulpfile.js中調(diào)用let $ =require('gulp-load-plugins')();
用gulp開頭的相應(yīng)插件，只需前面加$.即可
如gulp.connect，直接寫$.connect即可，后續(xù)會看到實例。
一、實現(xiàn)gulp各個任務(wù)分離：
利用node的fs模塊 讀取文件
①新建個文件夾放gulp各個任務(wù)，這里創(chuàng)建gulp文件夾。
在gulp新建server.js放gulp server任務(wù)（開啟服務(wù)器），把原來gulpfile.js文件里面的server任務(wù)復(fù)制過來即可。
這里用到gulp.connect插件。可以直接寫成$.connect.server..最后改寫成：
②在gulpfile.js配置文件加入以下代碼讀取gulp文件夾下的所有文件
一樣先引入：letfs=require('fs');
fs.readdirSync('./gulp/').forEach(() =>{
require('./gulp'+file)(gulp，$);
});
以上是gulpfile中一個server任務(wù)抽離的方法，同理，其他任務(wù)也一樣的方法抽離
二、gulp-clean 清除插件
①安裝：cnpm i gulp-clean --save-dev
$.clean();使用
②在gulp文件新建clean.js文件
寫清除任務(wù)代碼，如圖：
③在每次生成dev項目時都先清除原有的，如圖：
運行：gulp dev 可看到效果。
三、html-webpack-plugin插件（處理html文件）
①安裝文檔：https://www.npmjs.com/package/html-webpack-plugin
其實安裝命令很簡單直接復(fù)制文檔上的：
$ npm install html-webpack-plugin --save-dev
語法：
plugins:[
newHtmlWebpackPlugin({
title:'My?App',//標題
filename:'assets/admin.html'//生成文件路徑
})
]
本例中用：
plugins: [
newHtmlWebpackPlugin(
{
template:'./index.html', ?//模板
filename:path.resolve(__dirname,'dev/index.html'),//文件路徑
inject:'body'//在哪個標簽插入
}
)
]
其中path.resolve為node的path模塊中的方法，同樣的要先引入模塊
letpath=require('path');才能使用該模塊方法，在webpack配置文件中寫入以上代碼。
配置以后，index.html模板中不需要手動引入js，運行g(shù)ulp dev項目命令，會自動加上。
四、gulp-plumber 容錯機制插件
每次代碼有誤時，項目運行命令就運行中斷，修改后還需再輸入一遍項目運行命令才能繼續(xù)。
比較繁瑣，可以按照此插件，有錯誤時提示，修改后自動再繼續(xù)運行。
安裝：npm install --save-dev gulp-plumber
在容易出錯的任務(wù)中寫入即可，如圖：
五、安裝vue及簡單使用
安裝：cnpm i vue --save
index.html中寫入：
源文件js中寫入：
運行出錯解決方案：vue別名設(shè)置
conf文件夾下新建alias.js文件，代碼如下
module.exports= {
vue:'vue/dist/vue.js'
};
再到webpack配置文件webpack.config.js里面引入
letalias=require('./alias');
繼續(xù)在webpack配置文件中寫入：
再次運行，無措。
（學(xué)習(xí)記錄而已，文章還有待梳理）
