第三方模块 Gulp
基于node平台开发的前端构建工具
将机械化操作编写成任务,想要执行机械化操作时执行一个命令行命令任务就能自动执行了
Gulp能做什么:
- 项目上线、HTML、CSS、JS文件压缩合并
- 语法转换 (es6、 less…)
- 公共文件抽离
- 修改文件浏览器自动刷新
Gulp使用:
- 使用npm install gulp下载gulp库文件
- 在项目根目录下建立gulpfile.js文件
- 重构项目的文件夹结构src目录放置源代码文件dist目录放置构建后文件
- 在gulpfile.js文件中编写任务
- 在命令行工具中执行gulp任务
Gulp中提供的方法:
- gulp.src() :获取任务要处理的文件
- gulp.dest() :输出文件
- gulp.task() :建立gulp任务
- gulp.watch() :监控文件的变化
const gulp = require('gulp');
//使用gulp.task() 方法建立任务
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first', () => {
//获取要处理的文件
gulp.src('./src/css/base.css')
//将处理后的文件输出到dist目录
.pipe(gulp.dest('dist/css'));
})
gulp install gulp-cli -g
gulp first
Gulp插件:
- gulp-htmlmin:mhtml文件压缩
- gulp-csso:压缩css
- gulp-babel:JavaScript语法转化
- gulp-less:less语法转换
- gulp-uglify:压缩混淆JavaScript
- gulp-file-include:公共文件包含
- browsersync:浏览器实时同步
HTML的转换
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
// html任务
// 1.html文件中代码的压缩操作
// 2.抽取html文件中的公共代码
gulp.task('htmlmin', () => {
gulp.src('./src/*.html')
//抽取公共文件
.pipe(fileinclude())
// 压缩html文件中的代码
.pipe(htmlmin({ collapseWhitespace: true })) //是否压缩空格
.pipe(gulp.dest('dist'));
});
npm install gulp-htmlmin
gulp htmlmin
npm install gulp-file-include
将相同的部分新建到src下common公共部分,再用@@include引入到原文件
@@include('./common/header.html')
CSS的转换
const less = require('gulp-less');
const csso = require('gulp-csso');
// css任务
// 1.less语法转换
// 2.css代码压缩
gulp.task('cssmin', () => {
// 选择css目录下的所有less文件以及css文件
gulp.src(['./src/css/*.less', './src/css/*.css'])
// 将less语法转换为css语法
.pipe(less())
// 将css代码进行压缩
.pipe(csso())
// 将处理的结果进行输出
.pipe(gulp.dest('dist/css'))
});
npm install gulp-less
gulp cssmin
npm install gulp-csso
gulp cssmin
js的转换
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// js任务
// 1.es6代码转换
// 2.代码压缩
gulp.task('jsmin', () => {
gulp.src('./src/js/*.js')
.pipe(babel({
// 它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
});
npm install gulp-babel @babel/core @babel/preset-env
gulp jsmin
npm install gulp-uglify
gulp jsmin
复制文件夹
// 复制文件夹
gulp.task('copy', () => {
gulp.src('./src/images/*')
.pipe(gulp.dest('dist/images'));
gulp.src('./src/lib/*')
.pipe(gulp.dest('dist/lib'))
});
gulp copy
构建任务
// 构建任务
gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);
gulp default / gulp