WebPack打包

Gulp

什么是Gulp？

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入。

Gulp安装和使用

全局安装 gulp：

$ npm install --global gulp

作为项目的开发依赖（devDependencies）安装：

$ npm install --save-dev gulp

提示

实际开发过程中要同时全局和局部安装。

在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

运行 gulp：

$ gulp

默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。

想要单独执行特定的任务（task），请输入 gulp <task><othertask>。

$ gulp renwu1  renwu2

Gulp API

gulp.src(globs[, options])

输出符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。 将返回一个（stream），它可以被 piped（管道） 到别的插件中。

gulp.src('client/*.jade')
  .pipe(jade())
  .pipe(minify())
  .pipe(gulp.dest('build/mini'));

gulp.dest(path[, options])

能被 pipe 进来，并且将会写文件。并且重新输出所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。

gulp.src('client/*.jade')
  .pipe(jade())
  .pipe(minify())
  .pipe(gulp.dest('build/mini'));

提示

dest 可以理解为导出经过处理后的文件

gulp.task(name[, deps], fn)

//定义一个任务
gulp.task('somename', function() {
  // 做一些事
});

一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
  // 做一些事
});

提示

注意： 默认的，task 将以最大的并发数执行，也就是说，gulp 会一次性运行所有的 task 并且不做任何等待。如果你想要创建一个序列化的 task 队列，并以特定的顺序执行，你需要做两件事：

  • 给出一个提示，来告知 task 什么时候执行完毕。
  • 并且再给出一个提示，来告知一个 task 依赖另一个 task 的完成。

请看下面的例子：

var gulp = require('gulp');

// 返回一个 callback，因此系统可以知道它什么时候完成
gulp.task('one', function(cb) {
    // 做一些事 -- 异步的或者其他的
    cb(err); // 如果 err 不是 null 或 undefined，则会停止执行，且注意，这样代表执行失败了
});

// 定义一个所依赖的 task 必须在这个 task 执行之前完成
gulp.task('two', ['one'], function() {
    // 'one' 完成后
});

gulp.task('default', ['one', 'two']);

gulp.watch(glob[, opts], tasks)

需要在文件变动后执行的一个或者多个通过 gulp.task() 创建的 task（任务） 的名字。

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

//表示引进gulp模块,node_modules有安装
const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('sass', function() {
    return gulp.src('./theme/index.scss')
    .pipe(sass())
    .pipe(gulp.dest('./theme/lib'))
})

//触发上面定义的任务
gulp.task('watch', function() {
    gulp.watch('./theme/**/*.scss',['sass']);
})

gulp常用插件

  • gulp-less less编译
  • gulp-clean-css css压缩
  • gulp-uglify js压缩
  • gulp-imagemin 图片压缩
  • gulp-sourcemaps 生成sourcemap文件
  • gulp-clean 文件清除
  • gulp-rename 重命名文件
  • gulp-concat 合并文件
  • gulp-csso 压缩优化css
  • gulp-html-minify 压缩HTML
  • gulp-zip ZIP压缩文件
  • gulp-autoprefixer 自动为css添加浏览器前缀
  • gulp-sass 编译sass
  • gulp-babel 将ES6代码编译成ES5

← Webpack →