gulp自动化打包构建工具

524 阅读3分钟

gulp自动化打包工具

gulp使用

  1. 按照gulp目录结构创建项目
- 项目
    - src
        + pages //存储HTML页面
        + js //存储js文件
        + css //存储css文件
        + sass //存储.scss文件
        + lib //存储第三方包
        + static //存储静态资源,图片等等
  1. 初始化项目npm init
  2. 全局安装gulp,只安装一次npm install gulp -g
  3. 在项目中安装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中不能识别展开运算符...,会报错