关于第三方模块 Gulp

Gulp是基于node 平台开发的前端构建工具。

将机械化操作编写成任务，想要执行机械化操作时执行一个命令行命令，任务就能自动执行了

用机器代替手工，提高开发效率

1. Gulp 能做什么

• 项目上线，HTML,CSS,JS 文件压缩合并
• 语法转换（es6 转 es5，less 转 css）
• 公共文件抽离
• 修改文件浏览器自动刷新

2. Gulp的使用

1. 使用 npm install gulp 下载gulp库文件
2. 在项目的根目录下建立gulpfile.js 文件，这个文件名不能随意更改
3. 重构项目的文件夹结构。src目录放置源代码文件，dist目录放置构建后文件。
4. 在gulpfile.js 文件中编写任务
5. 在命令行工具中执行gulp任务

3. Gulp中提供的方法

• gulp.src()：获取任务要处理的文件
• gulp.dest（）：输出文件（我们获取到的文件都是在内存当中，然后我们在 内存当中处理这些文件，处理完成之后要输出到硬盘的某一个目录下面，当前就是dist目录）
• gulp.task（）：建立gulp任务（src，dest都是做任务时使用的方法）
• gulp.watch（）：监控文件的变化

示例代码如下，相比上面的图片有所变动：

4. Gulp 插件

• gulp-htmlmin：html文件压缩
• gulp-csso：压缩css
• gulp-babel：JavaScript语法转化
• gulp-less：less语法转化
• gulp-uglify：压缩混淆JavaScript
• gulp-file-include 公共文件包含
• browsersync： 浏览器实时同步

插件如何使用：

1. 下载
2. 引用
3. 调用

5. Gulp 的应用

我们需要完成几个任务：

1. 第一个任务：html

1. 压缩所有的html文件
2. 抽取所有html文件的公共部分

1.1 需要用到插件gulp-htmlmin

$ npm install --save gulp-htmlmin

1.2 需要用到gulp-file-include

npm install --save-dev gulp-file-include

1.3 之后，把公共代码抽取出来放在src 的common文件夹下

被抽取的html 文件删除公共代码后要加上如下代码：

gulpfile.js：

// 1.html文件中代码的压缩操作
// 2. 抽取html文件中的公共代码
// ps： 先抽取公共代码，再压缩，再输出
gulp.task('htmlmin', done => {
    gulp.src('./src/*.html')
        .pipe(fileinclude())
        // 压缩html文件中的代码
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist'));
    done()
});

最后执行的命令是： gulp htmlmin

之后的任务中 要安装的插件的引用和调用自己去npm官方网站查阅文档，不再粘贴文档中的示例

2. 第二个任务：css

1. less 语法的转化
2. css代码的压缩

3. 第三个任务：JavaScript

1. 实现es6代码的转换
2. 代码的压缩

4. 第四个任务：复制文件夹

5. 第五个任务：在命令行中执行default任务的时候，会依次执行数组里面的任务

gulp.task('default', gulp.series(['htmlmin', 'cssmin', 'jsmin', 'copy']))

附上gulp-demo，对照上面步骤进行了解：

百度网盘

链接：https://pan.baidu.com/s/1wCnn4arzjPMCoevs8zm3kw
提取码：0000