gulp构建工具的基本使用

gulp是前端自动化打包构建工具，基于流格式的打包构建工具 官网：

安装：

1. node环境
2. gulp: 全局安装：

npm install gulp -g

局部安装：

npm install gulp --save-dev

准备工作

1.gulpfile.js 2.初始化 package.json (npm init) 常用插件

gulp-concat : 合并文件（js/css） gulp-uglify : 压缩js文件 gulp-rename : 文件重命名 gulp-less : 编译less gulp-clean-css : 压缩css gulp-livereload : 实时自动编译更新

重要api

gulp.src(filePath) 指向指定路径得文件夹 gulp.dest(dirPath) 指向所有文件夹，用于输出文件 gulp.task(name,[deps],fn) 定义一个任务 gulp.watch() 监视文件变化

使用： 引入插件

var gulp = require(gulp)

// var $ = require(gulp-load-plugins)()   使用这个下面的插件可改为$.xx

// 引入插件
var concat = require(gulp-concat)
var rename = require(gulp-rename)
var uglify = require(gulp-uglify)
var cssClean = require(gulp-clean-css)
var livereload = require(gulp-livereload)
var connect = require(gulp-connect)

处理js任务

gulp.task(js,function(){
          
   

    return gulp.src(js/*.js)             //找到目标文件，将数据读取到gulp的内存中
        .pipe(concat(build.js))           //临时合并文件
        .pipe(gulp.dest(dist/js/))       //输出文件到本地
        .pipe(uglify())
        .pipe(rename({
          
   suffix:.min}))
        .pipe(gulp.dest(dist/js))
        .pipe(livereload())

})

css任务

gulp.task(cssMin,function(){
          
   
    return gulp.src(css/*.css)
    .pipe(cssClean())
    .pipe(gulp.dest(dist/css))
    .pipe(livereload())
})

监视任务

gulp.task("watch",function(){
          
   

    livereload.listen();

    gulp.watch(js/*.js,gulp.series(js))
    gulp.watch(css/*.css,gulp.series(cssMin))

})

实时更新页面

gulp.task("server",function(){
          
   

    connect.server({
          
   
        root:dist/,
        livereload:true,
        port:5000
    })

    gulp.watch(js/*.js,gulp.series(js))
    gulp.watch(css/*.css,gulp.series(cssMin))

})

默认任务

gulp.task(default,gulp.series(gulp.parallel(js,cssMin，........)));

重点编译ts=>es5

tsconfig.json ts编译配置文件

gulpfile.js

var ts = require(gulp-typescript)
var tsConfig = ts.createProject(tsconfig.json)
var webpack = require(webpack-stream)
var named = require(vinyl-named)

第一步，编译ts

gulp.task(compileTs,function(){
          
   
    // 任务操作
    return tsConfig.src()
        .pipe(tsConfig())
        .js.pipe($.babel({
          
   
            presets:[env]
        }))
        .pipe(gulp.dest("js"))
        .pipe($.livereload())
})

第二步，转js，其实第一步已经转了，这一步主要处理模块化编译，import/export,箭头函数等等

gulp.task("toJs",function(){
          
   
    return gulp.src("js/*.js")
        .pipe(named())
        .pipe(webpack({
          
   
            // production  development
            mode: "production",
            devtool:"source-map",
            output: {
          
   
                // 告诉webpack不使用箭头
                environment: {
          
   
                    arrowFunction: false,
                    const: false
                }
            },
        }))
        .pipe(gulp.dest(weige))
        .pipe($.livereload())
})

编译后代码： 使用感想：语法比较简单，性能好，总体来说比grunt更香