原码目录:src
打包目录:build
JS文件目录:src/js
目标:src 中的 JS 文件是未压缩的,打包至 build 目录后,生成 min.js 后缀的压缩文件
分析:
var config = {
src: "src",
dest: "build"
}
gulp-clean:清理文件及文件夹
/**
* 清理目标目录
*/
gulp.task('clean', function(cb) {
pump([
gulp.src(config.dist),
clean()
], cb)
})
gulp-rename: 更改文件名
gulp-uglify: 压缩JS文件
gulp-sourcemaps:生成sourceMap
gulp-changed: 只传递更改过的文件
/**
* 执行JS压缩
*/
gulp.task('minify:js', [], function(cb) {
pump([
// 获取原目录下所有的js文件
gulp.src(config.src + "/**/*.js"),
// 执行更名操作
rename({ suffix: '.min' }),
// 每次打包时,只打包内容发生改变的文件
changed(config.dist, { extension:'.js' }),
// 生成sourcemap,需要配合后面的sourcemaps.write()
sourcemaps.init(),
// 执行JS压缩
uglify(),
// 生成sourcemap
sourcemaps.write(),
// 输出至目标目录
gulp.dest(config.dist)
], cb);
});
删除文件时似乎并不能被监听到
/**
* 监听JS文件变改,即时调用任务执行JS增量打包
*/
gulp.task('watch', [], function(cb) {
gulp.watch(config.src + "/**/*.js", ['minify:js']);
});
run-sequence:任务同步
/**
* 开始执行
*/
gulp.task('default', function(cb) {
sequence('clean', 'minify:js', 'watch', cb);
});
var gulp = require('gulp'),
clean = require('gulp-clean'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
changed = require('gulp-changed'),
sourcemaps = require('gulp-sourcemaps'),
pump = require('pump'),
sequence = require('run-sequence');
var config = {
src: "src",
dist: "build"
}
/**
* 清理目标目录
*/
gulp.task('clean', function(cb) {
pump([
gulp.src(config.dist),
clean()
], cb)
})
/**
* 执行JS压缩
*/
gulp.task('minify:js', [], function(cb) {
pump([
// 获取原目录下所有的js文件
gulp.src(config.src + "/**/*.js"),
// 执行更名操作
rename({ suffix: '.min' }),
// 每次打包时,只打包内容发生改变的文件
changed(config.dist, { extension:'.js' }),
// 生成sourcemap,需要配合后面的sourcemaps.write()
sourcemaps.init(),
// 执行JS压缩
uglify(),
// 生成sourcemap
sourcemaps.write(),
// 输出至目标目录
gulp.dest(config.dist)
], cb);
});
/**
* 监听JS文件变改,即时调用任务执行JS增量打包
*/
gulp.task('watch', [], function(cb) {
gulp.watch(config.src + "/**/*.js", ['minify:js']);
});
/**
* 开始执行
*/
gulp.task('default', function(cb) {
sequence('clean', 'minify:js', 'watch', cb);
});