随着项目的推进，gulpfile.js配置文件里的任务越来越多，为了后续的管理方便，把gulp各个任务抽离出来，单独放在一个文件中。
在此之前，安装gulp-load-plugins 此插件是负责加载gulp所有插件 用cnpm安装
在gulpfile.js中调用let $ =require('gulp-load-plugins')();
用gulp开头的相应插件，只需前面加$.即可
如gulp.connect，直接写$.connect即可，后续会看到实例。
一、实现gulp各个任务分离：
利用node的fs模块 读取文件
①新建个文件夹放gulp各个任务，这里创建gulp文件夹。
在gulp新建server.js放gulp server任务（开启服务器），把原来gulpfile.js文件里面的server任务复制过来即可。
这里用到gulp.connect插件。可以直接写成$.connect.server..最后改写成：
②在gulpfile.js配置文件加入以下代码读取gulp文件夹下的所有文件
一样先引入：letfs=require('fs');
fs.readdirSync('./gulp/').forEach(() =>{
require('./gulp'+file)(gulp，$);
});
以上是gulpfile中一个server任务抽离的方法，同理，其他任务也一样的方法抽离
二、gulp-clean 清除插件
①安装：cnpm i gulp-clean --save-dev
$.clean();使用
②在gulp文件新建clean.js文件
写清除任务代码，如图：
③在每次生成dev项目时都先清除原有的，如图：
运行：gulp dev 可看到效果。
三、html-webpack-plugin插件（处理html文件）
①安装文档：https://www.npmjs.com/package/html-webpack-plugin
其实安装命令很简单直接复制文档上的：
$ 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，运行gulp dev项目命令，会自动加上。
四、gulp-plumber 容错机制插件
每次代码有误时，项目运行命令就运行中断，修改后还需再输入一遍项目运行命令才能继续。
比较繁琐，可以按照此插件，有错误时提示，修改后自动再继续运行。
安装：npm install --save-dev gulp-plumber
在容易出错的任务中写入即可，如图：
五、安装vue及简单使用
安装：cnpm i vue --save
index.html中写入：
源文件js中写入：
运行出错解决方案：vue别名设置
conf文件夹下新建alias.js文件，代码如下
module.exports= {
vue:'vue/dist/vue.js'
};
再到webpack配置文件webpack.config.js里面引入
letalias=require('./alias');
继续在webpack配置文件中写入：
再次运行，无措。
（学习记录而已，文章还有待梳理）
网友评论