gulp工程化打包压缩工具

// npm 安装包
// 软件类型  全局安装
npm i 包名[@版本号] -g
// 本地安装 一定区分 环境
开发环境
开发环境下的包：（上线后不需要用这个包）
npm i 包名 --save-dev (简写  -D)
生产环境
npm i 包名 --save (简写  -S)

gulp

工程化
软件 自动 完成 工程化 事务（压缩css 压缩html 合并js es6转es5）
打包代码
使用：使用于传统多页面应用 （mvc ）

// 项目目录
pro
    src // 源码目录
        css
        js
        lib // 第三方库
        pages // html目录
        static // 静态资源目录
// pro目录下打开cmd 执行npm init 生成package.json
// 安装 gulp
// 全局安装 gulp-cli
npm install --global gulp-cli

// 项目本地 安装gulp 
// pro目录下 打开 cmd
npm i gulp --save-dev

gulp 配置文件

根目录下常见 gulpfile.js

const gulp = require('gulp');

// 创建gulp task 任务
gulp.task('test', function(){
    // 注意回调函数需要return 
    console.log("test执行了")
})
// 运行任务 项目目录 cmd中执行
gulp 任务名

gulp运行原理分离
管道原理

gulp三个方法

gulp.src()  // 定义资源 查找资源
目录匹配规则

…/a/b/.css // 上一级目录中的a文件中的b文件中的 所有的.css文件
a//.css // a文件中任意目录中的任何的css文件
a/**/.css // ** 代表任意目录（可以嵌套无数层）

gulp.pipe() // 管道 运行管道函数

gulp.dest()

npm 淘宝源
nrm
cnpm
npm i -g cnpm --registry=https://registry.npm.taobao.org
// cnpm使用同npm

css 处理

gulp.task('cssmin', function(){
    return gulp.src('./src/css/*.css')
            .pipe(cssmin())
            .pipe(gulp.dest('./dist/css'))
})

// 编译sass
gulp.task('sass', function(){
    return gulp.src('./src/sass/*.scss')
        .pipe(sass())
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css'))
})

gulp 自动 加 css3 浏览器前缀

// 安装 gulp-autoprefixer
npm install --save-dev gulp-autoprefixer

gulp.task('css', function () {
    return gulp
    	.src('./src/css/**')   
    	.pipe(autoPrefixer({
        	 overRideBrowserslist : ["last 2 versions"]
    	}))
    	.pipe(cssmin())       
    	.pipe(gulp.dest('./dist/css'))  
})
/* 
overRideBrowserslist规则
见 https://github.com/browserslist/browserslist这个网站
*/

js es6转es5

npm install --save-dev gulp-babel @babel/core @babel/preset-env

gulp.task('js',function(){
    return gulp.src('./src/js/*.js')
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
})

打包html

npm i gulp-htmlmin
const htmlmin = require('gulp-htmlmin');

gulp.task('html',function(){
    return gulp.src('./src/pages/*.html')
    .pipe(htmlmin())
    .pipe(gulp.dest('./dist/pages'))
})
// 问题 css怎么处理

解决lib 和 static 库以及静态资源的问题

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'))
})

gulp 批量调用多个task

gulp.series(…task) // 同步执行 按照 series参数 先后顺序来执行
gulp.parallel(…task) // 异步 同时执行多个task

gulp babel先天不足

有些es6转换语法不转换 比如promise

html中直接引入 babelpolyfill 注意：需要在 写promise代码之前引入

打包自动清除dist

npm i gulp-clean
const clean = require('gulp-clean');
gulp.task('clean',function(){
    return gulp.src('./dist')
        pipe(clean())
})
// 添加批量任务中 应该先执行clean
gulp.task('default', gulp.series('clean','html',gulp.parallel('css','js','sass','lib','static')))

服务器

npm i gulp-webserver -D
const webserver = require('gulp-webserver')
gulp.task('server', function(){
    return gulp.src('./dist')
        .pipe(webserver({
            host: 'localhost',          // 配置打开浏览器的域名
            port: 3000,                 // 配置打开浏览器的端口号
            livereload: true,           // 自动刷新浏览器
            open: './pages/index.html'  // 默认打开 dist 文件夹下的哪个文件
        }))
})
// 注意 server执行顺序应该是 放到最后 等待所有资源构建完毕后再执行

// 扔到任务队列中的最后一个
gulp.task('default', gulp.series('clean','html',gulp.parallel('css','js','sass','lib','static'),'server'));

// 修改src 中代码 需要自动刷新浏览器 代码监听
gulp.watch('./src/**',gulp.series('default'))