Gulp
- 基于node平台开发的前端构建工具(node第三方模块)
- 将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了
- 用机器代替手工,提高开发效率。
1.Gulp能做什么
- 项目上线,HTML、CSS、JS文件压缩合并
- 语法转换(es6、less …)
- 公共文件抽离
- 修改文件浏览器自动刷新
2.Gulp使用
- 使用npm install gulp下载gulp库文件
- 在项目根目录下建立gulpfile.js文件
- 重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
- 在gulpfile.js文件中编写任务.
- 在命令行工具中执行gulp任务(安装gulp-cli命令行工具执行gulp任务)
3.Gulp中提供的方法
- gulp.src():获取任务要处理的文件
- gulp.dest():输出文件
- gulp.task():建立gulp任务
- gulp.watch():监控文件的变化
const gulp = require('gulp');
// 使用gulp.task()方法建立任务
gulp.task('first', () => {
// 获取要处理的文件
gulp.src('./src/css/base.css')
// 将处理后的文件输出到dist目录
.pipe(gulp.dest('./dist/css'));
});
实例(用gulp拷贝一个文件):
4.Gulp插件
- 插件比较多,我们做到会用即可,此处举出几个常用的插件作为演示
- 使用插件可参考官网:npm官网
- gulp-htmlmin :html文件压缩
- gulp-csso :压缩css
- gulp-babel :JavaScript语法转化
- gulp-less: less语法转化
- gulp-uglify :压缩混淆JavaScript
- gulp-file-include 公共文件包含
- browsersync 浏览器实时同步
总结:插件的使用步骤:安装->引入->调用
4.1演示
1.html任务(代码压缩,公共部分抽离)
// 引用gulp模块
const gulp = require('gulp');
// 引入处理HTML代码的模块
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
// html任务
// 1,html文件中代码压缩
// 2,抽取html文件中公共代码
gulp.task('htmlmin', async() => {
// 压缩src目录下所有HTML代码
await gulp.src('./src/*.html')
// 公共部分抽离
.pipe(fileinclude())
// 去除代码空格
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('./dist'))
});
注意:公共部分抽离时要写入模块提供的方法,把公共部分填入代码区( @@include(’./common/hander.html’)),压缩后,公共部分代码依旧还在。
2.css任务(代码压缩,less文件转换成css文件)
// 引入处理css的文件
const less = require('gulp-less');
const csso = require('gulp-csso');
// css任务
// 1,less文件转换成css文件
// 2,css文件的压缩
gulp.task('cssmin', async() => {
// 选择css目录下所有的less文件以及css文件
await gulp.src(['./src/css/*.less', './src/css/*.css'])
// less文件转换成css文件
.pipe(less())
// css代码压缩
.pipe(csso())
// 将处理后的结果进行输出
.pipe(gulp.dest('./dist/css'))
});
3.js任务(es6语法转换成es5语法,js代码压缩)
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// js任务
// 1,es6语法转换为es5语法
// 2,js代码的压缩
gulp.task('jsmin', async() => {
await gulp.src('./src/js/test.js')
.pipe(babel({
// 他可以判断当前代码运行环境,将代码转换成当前运行环境支持的代码
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('./dist/js'))
});
4.复制文件夹
// 复制文件夹
gulp.task('copy', async() => {
await gulp.src('./src/images/*')
.pipe(gulp.dest('./dist/images'));
await gulp.src('./src/lib/*')
.pipe(gulp.dest('./dist/lib'));
});
5.构建全部任务
gulp.task('default', gulp.series('htmlmin', 'cssmin', 'jsmin', 'copy'));
last:总结
- 此处只是演示了部分插件,更多的实用功能在我们用到时自行安装
- 再次奉上官网npm官网