自动构建工具_详解（gulp）

gulp自动构建工具

现在的前端开发

• 不再是简单的使用HTML + CSS + JavaScript 这些技术去构建网页应用。
• 我们要提高效率，就必须减少重复的工作。
• 使用less之类预处理的css
• 提供开发阶段更加便利，更加快捷
• gulp 就是一种可以自动化完成我们开发过程中大量的重复工作

1. 预处理语言的编译
2. js css html 压缩混淆
3. 图片体积优化

gulp是一个前端自动化构建工具。

gulp类似的工具：grunt 、webpack
gulp是基于node体系的。

gulp优点：

1. 易于使用
2. 构建快速
3. 插件高质
4. 易于学习

创建一个简单的应用

|- dist
|- src
    - js
    -css
    -less
|- index.html
|- gulpfile.js  ---gulp配置文件
|- package.json
    {
        "name":"gulp_test",
        "version":"1.0.0"
    }

gulp的安装

安装nodejs,查看版本：node -v

* 全局安装gulp
cnpm install gulp -g  

* 局部安装gulp
cnpm install gulp --save-dev (开发依赖包)

常用的gulp插件

注：使用 gulp-babel 需要安装

1. @babel/core：babel核心库 （必须）
2. @babel/preset-env：装了所有es6转化es5的规则（必须）
3. @babel/cli：执行babel命令
4. @babel/polyfill：补充低版本缺失的内容，如promise对象

cnpm install gulp-babel -S

cnpm install @babel/core @babel/cli @babel/preset-env @babel/polyfill -S

扩展的插件

点击查看

下载插件

$ cnpm install gulp-concat gulp-uglify gulp-rename --save-dev （多个插件同时下载）

$ cnpm install gulp-less gulp-clean-css --save-dev

配置插件:

//ulpfile.js
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require('gulp-less');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');

方法使用:

//注册任务
gulp.task('任务名',function(){
    //逻辑具体任务
})  

//读文件
gulp.src("目标文件路径") 

//输出文件
gulp.dest("输出的文件路径")   

//可以理解为管道，将操作加入到执行队列。
gulp.pipe()

//监听文件变更
gulp.task('任务名', function () {
    gulp.watch('监听文件目录', gulp.series('任务名', '任务名'...));
})

//设置执行任务顺序（串行）
gulp.series("任务名","任务名"...)

//设置执行任务顺序（并行）
gulp.parallel("任务名","任务名"...)

//注册多个任务
gulp.task('default', gulp.series("任务名"...));

gulpfile.js

旧版写法:

//引入模块
var gulp = require('gulp');

//注册转换less的任务
gulp.task('less',function(){
    return gulp.src('src/less/*.less')
    .pipe(less()) //使用less对象进行编译
    .pipe(gulp.dest('src/css')) /*编译的的结果保存到目录*/
})
/*注册转换sass的任务*/
gulp.task('sass',function(){
    return gulp.src("src/scss/*.scss")
    .pipe(sass()) //进行编译
    /*自动处理浏览器前缀 */
    .pipe(autoprefixer({
        browsers: ['last 2 versions', 'Android >= 4.0'], //浏览器版本
        cascade: true, //是否美化属性值 默认：true 
        remove:true //是否去掉不必要的前缀 默认：true 
    }))
    .pipe(gulp.dest('dist/'))
})

//注册合并压缩js的任务
gulp.task('js',function(){
    return gulp.src("src/js/**/*.js") //找到目标原文件，将数据读取到gulp的内存中
    .pipe(concat('build.js'))//合并临时文件
    .pipe(gulp.dest('dist/js/'))//输出文件到本地路径
    .pipe(uglify())//压缩文件
    .pipe(rename('build.min.js'))//重命名第一种情况
    .pipe(rename({suffix:'.min'})) //重命名第二种情况;suffix:后缀名
    .pipe(gulp.dest("dist/js/"))
})
/*
 * 编译js文件，合并js，并且压缩
 * es6 - es5 
 * 需要gulp-babel和@babel/core和@babel/presets-env
 * $ cnpm install gulp-babel @babel/core @babel/preset-env -S
 */
gulp.task('js',function(){
    return gulp.src('./src/js/style/*.js')
    .pipe(babel({
        presets:[
        	"@babel/preset-env"
		]
    }))  //编译es6 -es5
    .pipe(concat("all.js")) //合并
    .pipe(uglify()) //压缩
    .pipe(gulp.dest('./src/js/'))
})

/*注册压缩html的任务*/
gulp.task('htmlMin', () => {
    //removeComments: true,//清除HTML注释
    //collapseWhitespace: true,//压缩HTML
    return gulp.src('index.html')
      .pipe(htmlmin({collapseWhitespace: true,removeComments: true}))
      .pipe(gulp.dest('dist/'));
});

//开启服务
gulp.task('server',function(){
    return gulp.src('src')
    .pipe(webserver({
        port:9090, //端口号
        open:true, //自动打开浏览器
        livereload:true, //自动打开刷新
        proxies:[  //代理
            { source:'/api/find',target:'http://localhost:3000/api/find'}
        ]   
    }))
})

//起服务
gulp.task("webserver",function () {
    return gulp.src('./src/')
    .pipe(webserver({
        port:8089,
        open:true,
        host:"192.168.137.1",
        livereload:true,
        middleware:function(req,res){
            var pathname = url.parse(req.url).pathname;
            console.log(pathname);
            if(pathname === "/api/list"){
                 //设置响应头 -utf-8
                res.setHeader("content-type","text/plain;charset=utf-8");
                res.end(JSON.stringify({code:1,data:list}))
            }else{
                pathname = pathname === "/" ? "index.html" : pathname;
                res.end(fs.readFileSync(__dirname + "/src/" + pathname ));
            }
        }
        // proxies:[{
        //     source:"",target:""
        // }]
    }))
})

//监听scss文件的变化并执行sass命令执行编译
gulp.task('watch',function(){
    gulp.watch('./src/sass/*.scss',gulp.series('sass'))
})

//开发坏境（串联）
gulp.task('dev',gulp.series('任务名','任务名'))

/*线上环境（并联）*/
gulp.task('build',gulp.parallel('任务名','任务名'))

// 在gulp中创建default任务，默认执行web服务，js，scss，watch任务
gulp.task('default',gulp.series('web','js','scss','watch'))//同步
gulp.task('default',gulp.parallel('web','js','scss','watch'))//异步

// 在gulp中创建build任务，指向js,css任务，并把文件生成到dist文件夹
gulp.task('build',gulp.series('js','scss'))

新版写法

// 新版写法
const { src, dest, parallel } = require('gulp');
const sass = require('gulp-sass');
function scss() {
    // place code for your default task here
    return src('./sass/*.scss')
        .pipe(sass()) // 流入到工厂
        .pipe(dest('./dist/')) // 流出到指定位置
}

exports.scss = scss;

执行 --> gulp 任务名

一些参数:

• last 2 versions: 主流浏览器的最新两个版本
• last 1 Chrome versions: 谷歌浏览器的最新版本
• last 2 Explorer versions: IE的最新两个版本
• last 3 Safari versions: 苹果浏览器最新三个版本
• Firefox >= 20: 火狐浏览器的版本大于或等于20
• iOS 7: IOS7版本
• Firefox ESR: 最新ESR版本的火狐
• 5%: 全球统计有超过5%的使用率

在 package 文件中scripts字段添加dev 和 build 两个命令

{
  "scripts": {
    "dev": "gulp dev",// npm run dev 开发
    "build": "gulp build" // npm run build 
  },
  "devDependencies": {
    "gulp-sass": "^4.0.2",
    "gulp-webserver": "^0.9.1"
  }
}

思维导图: