fs模块/gulp-load-plugins/ gulp-cle

随着项目的推进，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配置文件中写入：

再次运行，无措。

（学习记录而已，文章还有待梳理）