为什么用 gulp.js

最近 Webpack 更流行些,比较 gulp.js、Grunt、Webpack 的文章我也读过一些,Hello World, gulp.js 的原因是看到的教程通俗易懂,够满足需要。其实就是为了解决解决问题过程中衍生出的次要问题而诞生的工具,原理差不多,普通应用转换不会太麻烦,不纠结。

安装与设置

首先你当然需要 node 和 npm

安装 gulp cli

npm install -g gulp-cli

项目内安装 module

npm install --save-dev gulp

本文还会用到 gulp 插件 gulp-sass 和 browser-sync

npm install --save-dev gulp-sass browser-sync

在项目根目录创建 gulpfile.js,gulp 的具体操作由该文件的内容决定。

Task - Hello World

gulp 将操作划分为 task。

gulp --tasks 列出 gulpfile.js 里的可用任务。gulp {taskname} 执行指定任务。

下面是 Hello World。

const gulp = require('gulp')

gulp.task('helloworld', () => {
  console.log('Hello World')
})

Task - Copy

一个正经的任务由 src、pipe、dest 三部分组成,从哪里来、做什么处理、到哪里去,重点在用不同的 pipe 做不同的事。

下面是从源文件夹到目标文件夹简单的复制,pipe 不做任何处理。

const gulp = require('gulp')

gulp.task('copy', () => {
  return gulp.src('./src/*').pipe(gulp.dest('./dest'))
})

Task - Sass

把源文件夹的 .scss 转换为 .css 再放入目标文件夹。

const gulp = require('gulp')
const sass = require('gulp-sass')

gulp.task('sass', () => {
  return gulp.src('./sass/*.scss')
             .pipe(sass())
             .pipe(gulp.dest('./css'))
})

Task - browserSync

gulp.watch() 可以用来监控文件的变化。

这个例子启动 browserSync 服务,一旦有 .html 文件内容变化则刷新浏览器。

const gulp = require('gulp')
const browserSync = require('browser-sync').create()

gulp.task ('browserSync', () => {
  browserSync.init({
    server: './'
  })
  gulp.watch('./*.html').on('change', browserSync.reload)
})

Task - browserSync & Sass

在上面例子的基础上,一旦 .scss 文件内容变化,调用 sass 任务生成 .css 文件,在通过 browserSync.stream() 更新浏览器中的内容。

const gulp = require('gulp')
const sass = require('gulp-sass')
const browserSync = require('browser-sync').create()

gulp.task('sass', () => {
  return gulp.src('./sass/main.scss')
             .pipe(sass())
             .pipe(gulp.dest('./css'))
             .pipe(browserSync.stream())
})

gulp.task('browserSync', gulp.series(['sass'], () => {
  browserSync.init({
    server: './'
  })
  gulp.watch('./sass/*.scss', gulp.series(['sass']))
  gulp.watch('./*.html').on('change', browserSync.reload)
}))

需要注意,gulp 4.0 开始,从一个任务调用另一个依赖任务的函数定义从 gulp.task(name, deps, func) 改为了 gulp.task(name, gulp.{series|parallel}(deps, func)),稍旧的教程里的代码示例不做相应修改会出错。

default Task

default 任务是默认入口,不指定任务名直接运行 gulp 就会执行 default 任务

在上面例子的基础上,再最后添加 default 任务

gulp.task('default', gulp.series(['browserSync']))

Version 2

写完以后才发现官网的 Quick Start 示例用了更「现代」的写法,似乎是更清爽一点

const gulp = require('gulp')
const sass = require('gulp-sass')
const browserSync = require('browser-sync').create()

function sassTask() {
  return gulp.src('./sass/main.scss')
             .pipe(sass())
             .pipe(gulp.dest('./css'))
             .pipe(browserSync.stream())
}

function browserSyncTask() {
  sassTask()
  browserSync.init({
    server: './'
  })
  gulp.watch('./sass/*.scss', sassTask)
  gulp.watch('./*.html').on('change', browserSync.reload)
}

function defaultTask() {
  browserSyncTask()
}

exports.default = defaultTask

(完)