gulp自动化打包工具
gulp使用
- 按照gulp目录结构创建项目
- 项目
- src
+ pages //存储HTML页面
+ js //存储js文件
+ css //存储css文件
+ sass //存储.scss文件
+ lib //存储第三方包
+ static //存储静态资源,图片等等
- 初始化项目
npm init
- 全局安装gulp,只安装一次
npm install gulp -g
- 在项目中安装gulp,使用api
npm i gulp
gulpAPI
- task()
//task任务,定义一个名为name的任务,可以通过gulp name 使用
const gulp = require('gulp')
gulp.task('name',function(){
return gulp.src().... //任务对应的代码
})
- src()
//将src括号中对应的路径转换为数据对象流
gulp.task('name',function(){
return gulp.src('路径')
})
- dest()
//将数据对象流转换为文件系统,路径是括号中所写路径,没有对应文件夹会创建
gulp.task('name',function(){
return gulp.src('路径')
.pipe(gulp.dest('输出路径'))
})
- pipe()
//可以将src处理之后的数据比作流,这些流在管道之间流通
gulp.task('name',function(){
return gulp.src('输出路径')
.pipe(gulp.dest('输出路径'))
})
- series()
//聚合任务,让任务按照顺序执行
gulp.task('name',gulp.series('task1','task2','task3'))
- parallel()
//聚合任务,让任务并发执行
gulp.task('name',gulp.parallel('task1','task2','task3'))
gulp打包
打包操作都是在gulpfile.js文件中操作,这个文件放在项目目录下
- 打包css文件
//下载第三方包,这些打包都是在开发时使用,需要加上-D
npm install gulp-cssmin -D
//引入第三方包
const cssmin = require('gulp-cssmin')
//操作,使用
gulp.task('css',function(){
return gulp.src('./src/css/**') //将文件转换为数据对象流
.pipe(cssmin()) //压缩css文件
.pipe(dest('./dist/css')) //数据对象流转换为指定路径文件
})
- 打包sass文件
//下载第三方包
npm install gulp-sass -D
npm install sass
//引入第三方包
const sass = require('gulp-sass')(require('sass'))
//操作,使用
gulp.task('sass',function(){
return gulp.src('./src/sass/**')
.pipe(sass()) //处理sass,将sass转换为css文件
.pipe(cssmin()) //压缩css文件
.pipe(dest('./dist/css'))
})
- 打包html文件
//下载第三方包
npm install gulp-htmlmin -D
//引入第三方包
const htmlmin = require('gulp-htmlmin')
//操作,使用
gulp.task('html',function(){
return gulp.src('./src/pages/**')
.pipe(htmlmin({
removeEmptyAttributes:true, //移除所有空属性
collapseWhitespace: true //压缩html
}))
.pipe(gulp.dest('./dist/pages'))
})
- 打包js文件
//下载第三方包
npm i gulp-uglify -D //压缩js
//es6转es5的三个依赖
npm i gulp-babel@7.0.1 -D
npm i babel-core -D
npm i babel-preset-es2015
//引入第三方包
const babel = require('gulp-babel') //转换至es5
const uglify = require('gulp-uglify') //压缩
//操作,使用
gulp.task('js',function(){
return gulp.src('./src/js/**')
.pipe(babel({
presets:['ese2015']
}))
.pipe(uglify())
.pipe(gulp.dest('./dist/js'))
})
- 打包static和lib文件
//static和lib都是存储的一些信息,不需要打包,直接复制
//操作,使用
gulp.task('static',function(){
return gulp.src('./src/static/**')
.pipe(gulp.dest('./dist/static'))
})
gulp.task('lib', function (){
return gulp.src('./src/lib/**')
.pipe(gulp.dest('./dist/lib/'))
})
- 清除之前打包的文件
//下载第三方包
npm i gulp-clean -D
//引入第三方包
const clean = require('gulp-clean')
//操作,使用
gulp.task('clean', function () {
return gulp.src('./dist/', { allowEmpty: true }) //允许文件为空
.pipe(clean())
})
- 自动打开浏览器运行指定文件
//下载第三方包
npm i gulp-webserver -D
//引入第三方包
const webserver = require('gulp-webserver')
//操作,使用
gulp.task('webserver', function () {
return gulp.src('./dist/')
.pipe(webserver({
host: 'localhost', //地址
port: 3000, //端口号
livereload: true, //自动刷新
open: './pages/index.html' //默认打开页面
}))
})
- 动态监听更新
//制作任务,自动重新编译,不需要依赖,直接监控文件改变任务
//操作,使用
gulp.task('watch', function () {
gulp.watch('./src/css/**', gulp.parallel('css'))
gulp.watch('./src/sass/**', gulp.parallel('sass'))
gulp.watch('./src/js/**', gulp.parallel('js'))
gulp.watch('./src/pages/**', gulp.parallel('html'))
gulp.watch('./src/lib/**', gulp.parallel('lib'))
gulp.watch('./src/static/**', gulp.parallel('static'))
})
- 更改默认任务default 可以使用gulp运行默认任务
exports.default = gulp.series('clean',
gulp.parallel('css', 'sass', 'js', 'html', 'static', 'lib'),
'webserver','watch')
- gulp中不能识别展开运算符
...
,会报错