目录
gulp是什么?
gulp是前端开发过程中一种基于流的代码构建工具,是基于Nodejs的自动任务运行器;它不仅能对网站资源进行优化,还能自动化地完成前端代码的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。
gulp包含的内容
gulp-cli:启动构建工具的命令行接口
本地gulp:构建时实际运行的程序
gulpfile.js:告诉gulp如何构建软件的指令文件
gulp插件:用于合并、压缩、修改文件的插件
gulp的安装和基本的构建项目
安装
1.全局安装gulp-cli,首先通过npm工具下载安装gulp-cli工具
npm install gulp-cli@2.3.0 -
2.在项目中安装gulp
(1)使用npm初始化项目
npm init
(2)局部安装gulp
npm install gulp@4.0.2 --save-dev
3.检查gulp版本
gulp -v
出来的结果应该是
CLI version: 2.3.0
Local version: 4.0.2
构建项目
(1)安装成功后,在项目的根目录下建立gulpfile.js文件,文件名不能随意更改
(2)重构项目的目录结构,如果所示
(3)在gulpfile.js文件中编写构建项目的任务
// 导入gulp
const gulp = require('gulp');
// 建立任务:gulp.task(‘任务名’,‘回调函数’)
gulp.task('first', (callback) => {
// 获取要处理的文件
gulp.src('./src/css/base.css')
// 将处理后的文件输出到dist目录里面
.pipe(gulp.dest('./dist/css'))
callback();
})
(4)在命令行中执行
gulp first
结果如下
[15:02:01] Using gulpfile ~/node js/230318/第三方模块/Gulp使用/gulpfile.js
[15:02:01] Starting 'first'...
[15:02:01] Finished 'first' after 14 ms
在项目中使用gulp
gulp中的常用插件
插件 | 说明 |
---|---|
gulp-htmlmin | 压缩HTML文件 |
gulp-csso | 压缩优化css |
gulp-babel | JavaScript语法转换 |
gulp-less | Less语法转换 |
gulp-sass | Sass语法转换 |
gulp-uglify | 压缩混淆JavaScript文件 |
gulp-file- include | 公共文件包含 |
browsersync | 浏览器时间实时同步 |
1.压缩并抽取HTML中的公共代码
(1)下载插件
npm install gulp-htmlmin
npm install gulp-file-include
(2)引入插件
(3)建立任务
// 引入htmlmin插件
const htmlmin = require('gulp-htmlmin')
// 引入gulp-file-include
const fileInclude = require('gulp-file-include')
// 2-建立任务:压缩html文件以及抽取公共部分代码
gulp.task('htmlmin', callback => {
// 获取文件:html文件
gulp.src('./src/*.html')
// 抽取公共部分代码
.pipe(fileInclude())
// 压缩html代码
// .pipe()只是对文件处理的结果进行包装,并不会直接操作文件
.pipe(htmlmin({
collapseWhitespace: true
}))
// 抽取并压缩后的html文件输出dist目录下
.pipe(gulp.dest('./dist'))
callback();
})
(4)抽取公共部分代码
1. 先把头部公共部分的代码剪切放在common文件夹下面的header.html文件中
@@include()语法是由gulp-file-include插件提供的,小括号中是代码片段的路径以及文件的名字。
2. 在原文件中(article.html)使用@@include('./common/header.html')()里面存放路径
(5)执行任务
gulp htmlmin
2.压缩并转换Less语法
(1)下载插件
npm install gulp-less
npm install gulp-csso
(2)引入插件
2.引入插件
// 引入gulp-less插件
const less = require('gulp-less')
// 引入gulp-csso插件
const cssmin = require('gulp-csso')
(3)在css文件夹下面建.less后缀的文件
.father {
background-color: #fff;
font-size: 16px;
.son {
font-weight: bold;
}
}
(4)建立任务
// 建立任务:转换less语法,压缩css文件
gulp.task('cssmin', callback => {
// 获取文件.css .less两种类型的文件
gulp.src(['./src/*.css', './src/css/*.less'])
// 转换less语法
.pipe(less())
// 压缩css文件
.pipe(cssmin())
// 输出处理之后的文件
.pipe(gulp.dest('./dist/css'))
callback();
})
(5)执行任务
gulp cssmin
3.压缩js代码并转换ES6语法
(1)下载插件
npm install gulp-babel @babel/core @babel/preset-env
npm install gulp-uglif
npm install uglify
(2)引入插件
// 引入gulp-babel插件
const babel = require('gulp-babel')
// 引入gulp-uglify插件
const uglify = require('gulp-uglify')
(3)建立任务
// 建立任务:转换ES6语法,压缩js文件
gulp.task('jsmin', callback => {
// 获取文件.js
gulp.src('./src/js/*.js')
// 转换es6代码
.pipe(babel({
// 判断当前代码的运行环境,将代码转换为当前运行环境所支持的代码
presets: ['@babel/env']
}))
// 压缩js文件
.pipe(uglify())
// 输出处理之后的文件
.pipe(gulp.dest('./dist/js'))
callback();
})
(4)执行任务
gulp jsmin
4.复制目录
(1)建立任务
// 建立任务:copy(images/lib)
gulp.task('copy', callback => {
// 获取文件images
gulp.src('./src/images/*')
// 将文件输出
.pipe(gulp.dest('./dist/images'))
// 获取文件lib
gulp.src('./src/lib/*')
// 将文件输出
.pipe(gulp.dest('./dist/lib'))
callback();
})
(2)执行任务
gulp copy
5.执行全部构建任务
(1)建立任务,使用gulp.series()方法
gulp.task('default', gulp.series('first', 'htmlmin', 'cssmin', 'jsmin', 'copy'))
(2)执行任务
gulp default
补充说明:gulp API的常用方法
方法 | 说明 |
---|---|
gulp.src() | 获取任务要处理的文件 |
gulp.dest() | 输出文件 |
gulp.task() | 建立gulp任务 |
gulp.watch() | 监控文件的变化 |