『初体验』gulp自动化构建打包

介绍

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。

主要API

1. gulp.src()

创建一个流，用于从文件系统 读取 Vinyl 对象。

2. gulp.dest()

创建一个用于将 Vinyl 对象 写入 到文件系统的流。

3. gulp.task()

在任务系统中 定义 任务。

4. gulp.watch()

监听 globs 并在发生更改时运行任务。

安装使用

1.初始化项目

npm init -y

2.安装gulp

npm i -D gulp

建议在全局中也装上:

npm i -g gulp

3.创建gulpfile.js文件

创建gulpfile.js文件后，并在文件内写入测试内容：

function defaultTask(cb) {
  console.log('Hello Gulp!')
  cb();
}
exports.default = defaultTask

4.执行任务

在控制台中输入命令执行对应任务:

gulp default

5.测试结果

插件介绍

项目插件使用情况：

"devDependencies": {
   "babel-cli": "^6.26.0",
   "babel-core": "^6.26.3",
   "babel-preset-es2015": "^6.24.1",
   "gulp": "^4.0.2",
   "gulp-babel": "6",
   "gulp-clean-css": "^4.3.0",
   "gulp-concat": "^2.6.1",
   "gulp-less": "^4.0.1",
   "gulp-load-plugins": "^2.0.4",
   "gulp-rename": "^2.0.0",
   "gulp-uglify": "^3.0.2",
   "gulp-util": "^3.0.8"
 }

• gulp-load-plugins

gulp插件加载神器：
用了该插件后，无需手动require插件，它会自动检测到devDependencies内属于gulp的插件并挂载到自身中。

var gulp = require('gulp')
// 无需手动引入插件
// var cleanCss = require('gulp')
var plugins = require('gulp-load-plugins')()

// 使用插件：plugins.cleanCss (短横线 转换为 驼峰)

• gulp-clean-css

该插件用于压缩css文件

gulp.src('src/css/*.css') // 此处指定输如的文件
    .pipe(plugins.cleanCss())
    .pipe(gulp.dest('dist')) // 此处指定输出的文件夹

项目实际应用

功能：

1. 将es6编译为es5
2. 压缩并合并js文件
3. 编译less文件
4. 压缩并合并css文件
5. 监听文件修改自动执行构建任务
6. 任务执行时报错标识

var gulp = require('gulp')
var plugins = require('gulp-load-plugins')()

var jsPath = [
    'src/js/*.js'
]
var cssPath = [
    'src/css/*.css'
]
var lessPath = [
    'src/css/*.less'
]
// js任务
gulp.task('jscompress',done=>{
    console.log('Gulp js...')
    gulp.src(jsPath)
    .pipe(plugins.babel({
        presets:['es2015']
    }))
    .pipe(plugins.uglify())
    .on('error',function(err){
        plugins.util.log(plugins.util.colors.red('[Error]'),err.toString())
    })
    .pipe(plugins.concat('mathEdit.min.js'))
    .pipe(gulp.dest('dist'))

    done()
})
// less任务
gulp.task('lesstask',done=>{
    console.log('Gulp less...')

    gulp.src(lessPath)
    .pipe(plugins.less())
    .pipe(gulp.dest('src/css'))
    .on('end',function(){
        done()
    })
})

// css任务
gulp.task('csstask',done=>{
    console.log('Gulp css...')
    gulp.src(cssPath)
    .pipe(plugins.cleanCss())
    .on('error',function(err){
        plugins.util.log(plugins.util.colors.red('[Error]'),err.toString())
    })
    .pipe(plugins.concat('mathEdit.min.css'))
    .pipe(gulp.dest('dist'))
    done()
})

gulp.task('csscompress',gulp.series('lesstask','csstask'))

// 监听文件并自动构建
gulp.task('auto', function () {
    gulp.watch(jsPath, gulp.series('jscompress'));
    gulp.watch(lessPath, gulp.series('csscompress'));
});

exports.lib = gulp.series('jscompress','csscompress')

技巧

• 等待less编译出文件后，再进行css文件压缩合并

解决：监听end事件，在end事件进行回调：

// less任务
gulp.task('lesstask',done=>{
    console.log('Gulp less...')
    gulp.src(lessPath)
    .pipe(plugins.less())
    .pipe(gulp.dest('src/css'))
    
    // 监听end事件
    .on('end',function(){
        done()
    })
})