Gulp自动化构建打包工具

Gulp是一个项目开发的，自动化打包构建工具，基于node环境下运行

功能

1. 压缩文件
2. 转化sass为css

下载

1. npm i gulp -g
2. gulp --version出现版本号安装成功

使用gulp

1. 创建项目目录结构

• gulp_demo
  • src 项目源码
    • css css文件夹
    • js js文件夹
    • pages html文件夹
    • sass sass文件夹
    • lib 第三方文件夹
    • static 静态资源文件夹（图片那些）
  • dist gulp处理结果保存的地方

2. 初始化项目，在gulp_demo里面执行项目初始化 npm init -y

Gulp项目配置

1. npm install -D gulp
   注：虽然之前全局安装了gulp,但单个项目是不同的，需要在项目里再次安装
2. 在gulp_demo下在创建一个文件gulpfile.js
3. 在gulpfile.js文件里面进行配置，让我们的打包构建可以生效

Gulp Api

1. task()每个gulp命令都是一个异步函数

//引入gulp
const gulp=require('gulp')
 
gulp.task('css',function(){
    //执行函数
})

2. src()创建一个流，用于引入文件
3. dest()创建一个用于输入的流
4. pipe()管道，用于连接引入流和输出流
5. 示例：

//引入gulp
const gulp=require('gulp')
 
gulp.task('css',function(){
    //引入一个流
    const oldCss=gulp.src('./src/css/code.css')
    //输出一个流
    const newCss=gulp.dest('./dist/css')
    return oldCss.pipe(newCss)
})
//当在终端输入gulp css后在dist/css/下面会多一个复制的code.css文件

6. series()将任务函数组合成更大的操作，这些操作按顺序执行

gulp.series('js','css')

7. parallel()将任务函数组合成更大的操作，这些操作同时执行

gulp.parellel('js','css')

8. watch()实时编译

gulp.watch('./src/css/**',gulp.parallel('./dist/css')) 
//**表示监控下面的所有文件

打包操作

1. 打包CSS文件

• 下载三方工具npm i -D gulp-cssmin
• 引入const cssmin=require(‘cssmin’)
• 执行代码

gulp.task('css',function(){
	return gulp.src('./src/css/**').pipe(cssmin()).pipe(gulp.dest('./dist/css'))
})
//终端输入gulp css执行

2. 打包sass文件

• 下载三方工具npm i -D gulp-sass && npm i sass
• 引入const sass=require(‘gulp-sass’)(require(‘sass’))
• 执行代码

gulp.task('sass',function(){
	return gulp.src('./src/sass/**').pipe(sass()).pipe(cssmin()).pipe(gulp.dest('./dist/css'))
})
//终端输入gulp sass执行

3. 压缩JS文件

• 下载三方工具npm i -D gulp-uglify
• 引入const uglify=require(‘gulp-uglify’)
• 执行代码

gulp.task('js',function(){
	return gulp.src('./src/js/**').pipe(uglify()).pipe(gulp.dest('./dist/js'))
})
//终端输入gulp js执行

4. 打包HTML文件

• 下载三方工具npm i -D gulp-htmlmin
• 引入const htmlmin=require(‘htmlmin’)
• 执行代码

gulp.task('html',function(){
	return gulp.src('./src/pages/**').pipe(htmlmin({removeEmptyAttibutes:true,collapseWhitespace:true})).pipe(gulp.dest('./dist.pages'))
})
//终端输入gulp html执行

5. 处理lib和static这些只需要copy过去就行
6. 当要执行命令过多时，我们可以集成下

exports.default=gulp.parallel('css','sass','js','html')
//通过exports将默认对象暴露出区，现在在终端只需执行gulp

7. 清除DIST文件夹

• 在编译时候，如果dist文件夹中已经有了这个文件还是会从再编译一个文件，为了避免这个问题我们可以先删除再编译
• 下载三方工具npm i -D gulp-clean
• 引入const clean=require(‘clean’)
• 执行命令

gulp.task('clean',function(){
	return gulp.src('./dist',{allowEmpty:true}).pipe(clean())
	//allowEmpty表示在dist不在时也可执行，不会报错
})
//终端执行gulp clean删除dist文件夹

8. 自动打开浏览器，在编译完成后自动打开浏览器

• 下载npm i -D gulp-webserver
• 导入const webserver=require(‘gulp-webserver’)
• 执行代码

gulp.task('webserver',function(){
	return gulb.src('./dist').pipe(webserver({	
		host:'localhost',//配置打开浏览器域名
		port:3000,//配置浏览器打开端口
		livereload:true,//自动刷新浏览器
		open:'./pages/index.html'//默认打开dist文件夹下那个文件
	}))
})

9. 安装包参数

• npm install -S sass 线上环境依赖
• npm install -D sass 开发dev环境依赖

GULP代码

const gulp = require('gulp')
const cssmin = require('gulp-cssmin')
const sass = require('gulp-sass')(require('sass'));
// 3-1. 引入 gulp-uglify
const uglify = require('gulp-uglify')
 
// 3-2. 引入 gulp-babel
//      es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了
const babel = require('gulp-babel')
 
// 4. 引入 gulp-htmlmin
const htmlmin = require('gulp-htmlmin')
 
// 5. 引入 gulp-clean
const clean = require('gulp-clean');
 
// 7. 引入 gulp-webserver
const webserver = require('gulp-webserver')
 
gulp.task('css', function () {
    return gulp.src('./src/css/**')
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css'))
})
 
 
gulp.task('sass', function () {
    return gulp.src('./src/sass/**')
        .pipe(sass())
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css'))
})
 
// 3. 创建一个 js 任务
gulp.task('js', function () {
    return gulp
        .src('./src/js/**')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
})
 
// 4. 创建一个 html 任务
gulp.task('html', function () {
    return gulp
        .src('./src/pages/**')
        .pipe(htmlmin({
            removeEmptyAttibutes: true, // 移出所有空属性
            collapseWhitespace: true // 压缩 html
        }))
        .pipe(gulp.dest('./dist/pages'))
})
 
 
gulp.task('lib', function () {
    return gulp.src('./src/lib/**')
        .pipe(gulp.dest('./dist/lib'))
})
 
gulp.task('static', function () {
    return gulp.src('./src/static/**')
        .pipe(gulp.dest('./dist/static'))
})
 
// 8. 创建一个 clean 任务
gulp.task('clean', function () {
    return gulp
        .src('./dist', {
            allowEmpty: true
        }) // {allowEmpty: true} dist目录不存在时配置
        .pipe(clean())
})
// 9. 创建一个 webserver 任务
gulp.task('webserver', function () {
    return gulp
        .src('./dist')
        .pipe(webserver({
            host: 'localhost', // 配置打开浏览器的域名
            port: 3000, // 配置打开浏览器的端口号
            livereload: true, // 自动刷新浏览器
            open: './pages/index.html' // 默认打开 dist 文件夹下的哪个文件
        }))
})
// 10. 创建一个 watch 任务
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'))
})
 
 
exports.default = gulp.series('clean', 
     gulp.parallel('css', 'sass', 'js', 'html', 'lib', 'static'), 
     gulp.series('webserver','watch'))