全局安装gulp-cli
npm install gulp-cli@2.3.0 -g
安装完成后利用 gulp -v 进行查看
在项目中安装gulp
使用npm初始化项目
npm init
初始化结束后 该命令会自动创建一个package.json的新文件
b.局部安装gulp
npm install gulp@4.0.2 --save-dev
完成后会生成一个mode_modules目录和package-lock.json文件
3,构建项目
const gulp = require('gulp');
常用方法 gulp
gulp.src (): 获取任务要处理的文件
gulp:dest():输出文件
gulp.task(): 建立gulp任务
gulp.watch() : 监控文件的变化
在项目中的常用插件以及使用
1.压缩html文件以及抽取公共部分代码
(1)下载插件
npm install gulp-htmlmin
npm install gulp-file-include
(2)引入插件
// 引入htmlmin插件
const htmlmin = require('gulp-htmlmin')
// 引入gulp-file-include
const fileInclude = require('gulp-file-include')
(3)建立任务
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
1.下载插件
(1)less转换
npm install gulp-less
(2)css压缩
npm install gulp-csso
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
1.压缩js代码并转换ES6语法
(1)下载插件
npm install gulp-uglify
npm install gulp-babel @babel/core @babel/preset-env
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();
})
执行任务gulp jsmin
// 建立任务: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();
})
执行全部构建任务
(1)gulp.task('default' ,gulp.series('htmlmin', 'cssmin', 'jsmin', 'copy'))