gulp创建自动化工具

1.新建一个文件夹

例如：myweb建立在D盘中，然后打开终端（cdm => D: => cd myweb）执行一步按一次回车，找到了新建文件夹的位置

2.输入npm init 一直回车(也可以直接输入npm init -y直接建立不需要按很多回车)，这里是自动建立package.json文件

3.全局安装gulp:  npm install --global gulp 

4. 作为项目的开发依赖： npm install gulp --save-dev

5.在项目根目录下创建一个名为 gulpfile.js 的文件： 

let gulp = require('gulp');

gulp.task('default', function() { // 将你的默认的任务代码放在这 });

6.接下来就要安装自己需要gulp的插件

下面是常用插件的用法：

gulp-less // css预处理语言

gulp-pug // html

gulp-imagemin // 压缩图片

gulp-minify-css // 压缩css文件

gulp-watch // 监听修改后的文件自动实时修改

browser-sync // 修改后自动刷新浏览器

gulp-autoprefixer // 自动添加浏览器的前缀

del // 删除或者清空文件

gulp-rename // 文件重命名

gulp-uglify // 压缩js文件，这个需要和babel使用（将es6转换为es5）

gulp-plumber // 构建异常捕获，防止构建进程崩掉；出错不中断

gulp-better-rollup // 读取文件，构建依赖关系树，转换内容，然后编写转换后的文件

rollup-plugin-babel  // rollup 的 babel 插件，ES6转ES5(安装这个插件的同时需要安装下面的几个插件和子啊根目录上新建一个.babelrc文件)

    babel-core // 所有转换都将使用您的本地配置文件

    babel-env // 表示不同环境的键的对象

    babel-plugin-transform-runtime // 

rollup-plugin-commonjs  // 将非ES6语法的包转为ES6可用;node_modules中的包大部分都是commonjs格式的，要在rollup中使用必须先转为ES6语法，为此需要安装这个插件

rollup-plugin-node-resolve // 帮助寻找node_modules里的包;rollup无法识别node_modules中的包,需要使用这个插件，然后在plugins中使用

红色标注的这四个需要一起使用，把js模块化打包

差不多一个自动化构建工具就完成了