第三方模块Gulp

1.Gulp介绍

        gulp是基于node平台开发的前端构建工具，将机械化操作编写成任务，用机器代替手工提高开发效率。当项目开发完成，部署到线上运行的时候，将HTML、CSS、JS文件压缩合并。还可以语法转换，例如ES6、LESS、SASS。Gulp的作用还有：将公共文件抽离、修改文件浏览器自动刷新。

2.Gulp的使用

(1) 下载：npm install gulp

(2)在项目根目录下建立gulpfile.js文件

(3)重构项目的文件夹结构src目录放置源代码文件，dist目录放置构建后文件

(4)在gulpfile.js文件中编写任务

(5)在命令行工具中执行gulp任务

3.gulp中提供的方法

gulp.src()  获取任务要处理的文件

gulp.dest()  输出文件

gulp.task()  建立gulp任务

gulp.watch()  监控文件的变化  

4.gulp命令行工具

gulp中提供了命令行工具可以执行命令(安装)：npm install gulp-cli -g  (-g是全局安装，当前项目可用，其他项目也可用)

clear:清屏

命令语句: gulp+空格+要执行的命令

e.g: gulp first

复制文件e.g：

//通过gulp.task建立任务
//参数一：任务的名称  参数二：任务的回调函数
gulp.task('first',()=>{
    console.log('第一个gulp任务执行了！')
    //使用gulp.src获取要处理的文件
    gulp.src('./src/css/base.css')
    //要处理的代码必须写在pipe中
        .pipe(gulp.dest('dist/css'))
})

5.gulp插件

gulp-htmlmin: html文件压缩     

gulp-csso: 压缩css文件

gulp-babel: js语法转换

gulp-less: less语法转换

gulp-uplify: 压缩混淆的js

gulp-file-include: 公共文件包含     

browsersync: 浏览器实时同步

插件的使用：

（1）下载插件

（2）引入插件

（3）调用插件

详细请参考：https://www.npmjs.com