一、第三模块Gulp构建工具
- 基于Node平台开发的前端构建工具（需要安装node.js）
- 将机械化操作编写任务，想要执行机械化操作时执行一个命令行命令任务就能自动执行了
- 用机器代替手工完成一些代码的压缩
二、Gulp能做什么
- 项目上线，HTML、CSS、JS文件压缩合并
- 语法转换（es6、less…）
- 公共文件抽离
- 修改文件浏览器自动刷新
三、Gulp使用
- 使用
npm install gulp下载gulp库文件（不要加-g）-g是全局安装 不加则是本次项目安装 - 在项目根目录下建立
gulpfile.js文件 - 重构项目的文件夹结构
src目录放置源代码文件dist目录放置构建后文件 - 在
gulpfile.js文件中编写执行任务 - 在命令行工具中执行gulp任务
四、实践操作
-
在编辑器中创建一个gulp-demo文件夹
-
在文件夹下按住shift+鼠标右键 打开PowerShell窗口cd
-
在此文件夹下面使用
npm install gulp下载gulp库文件，我这里没有更换下载的资源，切换为国内的淘宝镜像资源会快一点
-
在根目录gulp-demo文件夹下面创建一个
gulpfile.js
五、Gulp中提供的方法
- gulp.src()：获取任务要处理的文件
- gulp.dest()：输出文件
- gulp.task()：建立gulp任务
- gulp.watch()：监控文件的变化
- 代码实例
//通过require引入gulp
const gulp = require('gulp');
//使用gulp.task()建立任务
gulp.task('frist',() = >{
//获取要处理的文件
gulp.src('./src/css/base.css')
//将处理后的文件输出到dist目录
.pipe(gulp.dest('./dist/css'))
})
安装gulp命令行工具npm install gulp-cli -g以便于来使用gulp
使用gulp 后面是你需要执行的任务名称
这样一个简单的gulp任务就完成啦！
六、Gulp插件
- gulp-htmlmin：HTML文件压缩
首先需要在当前文件夹下面$ npm install --save gulp-htmlmin
然后引用模块
const htmlmin = require('gulp-htmlmin');
执行任务
//1.html文件中代码的压缩操作
//2.抽取html文件中的公共代码
gulp.task('htmlmin',()=>{
//这句话的意思是返回上一级目录找到src目录下面的 后缀是html的文件
gulp.src('./src/*.html')
.pipe(fileinclude())
// 压缩html文件中的代码
.pipe(htmlmin({
collapseWhitespace: true }))
/*将压缩好的文件压缩到dist文件夹下面*/
.pipe(gulp.dest('dist/html'));
});
保存后回到命令行界面 执行 gulp htmlmin 就可以了
- gulp-csso：压缩css
- gulp-babel：JavaScript语法转化
- gulp-less：less语法转化
- gulp-uglify：压缩混淆JavaScript
- gulp-file-include公共文件包含
- browsersync浏览器实时同步
**注意！！！在引入插件的时候 需要在前面 先引入gulp ，不然的话，插件也是会无用的**
这次的分享就到这里的，你觉得对你有用的话，一键三连呀~