第三方模块 Gulp:基于node平台开发的前端构建工具
- 作用:项目上线时html css js文件的压缩合并
- 如es6,less的语法转换
- 公共文件抽离
- 修改文件浏览器自动刷新
1. gulp的使用
- 使用npm install gulp 下载gulp文件
- 在项目根目录下建立 gulpfile.js文件
- 重构项目的文件结构 src 目录放置源代码文件 dist 目录放置构建后文件
- 在gulpfile.js中编写任务
- 在命令工具行中执行gulp任务
2. gulp中提供的方法
- gulp.src():获取任务要处理的文件
- gulp.dest():输出文件
- gulp.task():建立gulp任务
- gulp.watch():监控文件的变化
2. gulp插件
- gulp-htmlmin: html压缩
- gulp-file-include: 抽取公共头部
- gulp-csso: 压缩css
- gulp-less: less语法转换
- gulp-balel: JavaScript语法转换
- gulp-uglify: 压缩js
- browsersync:浏览器实时同步
- gulpfile.js中编写任务
//引用gulp模块
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
//建立任务
//参数:1.任务名称 2.任务的回调函数
gulp.task('first', () => {
console.log('11');
//1.用gulp.src获取要处理的文件
return gulp.src('./src/css/base.css')
.pipe(gulp.dest('dist/css'));
});
//html任务
//1.压缩
//2.提取公共部分
gulp.task('htmlmin', () => {
return gulp.src('./src/*.html')
.pipe(fileinclude())
//压缩html中的代码
.pipe(htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest('dist'));
});
//css任务
//1.less语法转换
//2.css代码压缩
gulp.task('cssmin', () => {
return gulp.src(['./src/css/*.less', './src/css/*.css'])
.pipe(less())
.pipe(csso())
.pipe(gulp.dest('dist/css'))
});
//js任务
//1.es6代码转换
//2.代码压缩
gulp.task('jsmin', () => {
return gulp.src('./src/js/*.js')
.pipe(babel({
//转换
presets: ['@babel/env']
}))
//压缩
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
});
//复制文件夹
gulp.task('copy', () => {
return gulp.src('./src/images/*')
.pipe(gulp.dest('dist/images'));
gulp.src('./src/lib/*')
.pipe(gulp.dest('dist/lib'))
});
gulp.task('copyy', () => {
return gulp.src('./src/lib/*')
.pipe(gulp.dest('dist/lib'))
});
//构建任务
gulp.task('default', gulp.series(['htmlmin', 'cssmin', 'jsmin', 'copy', 'copyy',
async (done) => done
]))
- 命令工具行中执行gulp任务
注意点:gulp3和gulp4用法有区别