gulp构建工具的基本使用

gulp是前端自动化打包构建工具，基于流格式的打包构建工具
官网：https://www.gulpjs.com.cn/

安装：

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编译配置文件

{
  "include": [
    "./src/**/*.ts"
  ],
  "compilerOptions": {
    "module": "amd",
    "noImplicitAny": true,  //函数末尾返回值
    "target": "es5",        //目标js标准
    "strict": true,
    "sourceMap":true,       //是否使用map
    "outDir":"./js",        //输出路径文件夹
    "allowJs":false,        //是否接收js文件作为来源
    "allowUnreachableCode":false  //是否允许文件中存在执行不到的代码
  },
  "exclude":[  //要排除的目录
    "node_modules"
  ],
}

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更香