Gulp 学习笔记

准备工作

1. 新建项目目录

mkdir learn-gulp

2. 在项目根目录下安装 Gulp

cd learn-gulp
npm init -y
npm install gulp -D

3. 修改 package.json 文件

"scripts": {
  "gulp": "gulp"
}

4. 在项目根目录下创建 gulpfile.js 文件

touch gulpfile.js

创建任务

执行特定任务

/* gulpfile.js */

const gulp = require('gulp')

gulp.task('hello', function () {
  console.log('Hello World!')
})

npm run gulp hello

执行默认任务

/* gulpfile.js */

const gulp = require('gulp')

gulp.task('hello', function () {
  console.log('Hello World!')
})

gulp.task('default', ['hello'])

npm run gulp

使用场景

拷贝单个文件

gulp.task('copy-index', function () {
  gulp.src('index.html').pipe(gulp.dest('dist'))
})

拷贝多个文件

gulp.task('images', function () {
  // 拷贝 .jpg 结尾的文件
  gulp.src('images/*.jpg').pipe(gulp.dest('dist/images'))
  // 拷贝 .jpg 和 .png 结尾的文件
  gulp.src('images/*.{jpg,png}').pipe(gulp.dest('dist/images'))
  // 拷贝 ./images 目录下的所有的文件。拷贝 ./images 目录下的子目录，但是不拷贝子目录下的文件
  gulp.src('images/*').pipe(gulp.dest('dist/images'))
  // 拷贝 ./images 目录以及二级目录下的所有的文件。拷贝 ./images 目录下的子目录，同时拷贝子目录下的文件
  gulp.src('images/*/*').pipe(gulp.dest('dist/images'))
  // 拷贝 ./images 目录下的所有级别的目录下的所有文件
  gulp.src('images/**/*').pipe(gulp.dest('dist/images'))
})

拷贝多个目录

gulp.task('data', function () {
  // 拷贝 xml 目录下的所有 xml 文件，json 目录下的所有 json 文件，但是不拷贝 json 目录下的 secret- 开头的.json 文件
  gulp.src(['xml/*.xml', 'json/*.json', '!json/secret-*.json']).pipe(gulp.dest('dist/data'))
})

任务依赖

// 执行 build 任务之前，需要并发执行 copy-index images data 这三个任务
gulp.task('build', ['copy-index', 'images', 'data'], function () {
  console.log('编译成功！')
})

监听文件变化

gulp.task('watch', function () {
  // 当 index.html 文件改变的时候，执行 copy-index 任务
  gulp.watch('index.html', ['copy-index'])
  // 当 images 目录下的所有 .jpg 和 .png 文件改变的时候 (添加 删除 修改)，执行 images 任务
  gulp.watch('images/**/*.{jpg,png}', ['images'])
  // 监听 xml 文件和 json 文件，但是不监听 json 目录下的 secret- 开头的.json 文件
  gulp.watch(['xml/*.xml', 'json/*.json', '!json/secret-*.json'], ['data'])
})

插件

在这里查找 Gulp 的插件，在项目根目录下通过 npm 安装相关插件，然后在 gulpfile.js 中引入插件，进行相关操作

编译 Sass 文件

npm install gulp-sass -D

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

gulp.task('sass', function () {
  gulp.src('stylesheets/**/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'))
})

创建本地服务器并且实时预览

npm install gulp-connect -D

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

gulp.task('server', function () {
  connect.server({
    root: 'dist',
    livereload: true
  })
})

gulp.task('copy-index', function () {
  gulp.src('index.html')
    .pipe(gulp.dest('dist'))
    .pipe(connect.reload())
})

gulp.task('watch', function () {
  gulp.watch('index.html', ['copy-index'])
})

gulp.task('default', ['server', 'watch'])

合并、压缩 js 文件

npm install gulp-concat gulp-uglify gulp-rename -D

const gulp = require('gulp')
const concat = require('gulp-concat')
const uglify = require('gulp-uglify')
const rename = require('gulp-rename')

gulp.task('scripts', function () {
  gulp.src('javascript/**/*.js')
    .pipe(concat('vender.js'))
    .pipe(gulp.dest('dist/js'))
    .pipe(uglify())
    .pipe(rename('vender.min.js'))
    .pipe(gulp.dest('dist/js'))
})

压缩 css 文件

npm install gulp-sass gulp-minify-css -D

const gulp = require('gulp')
const sass = require('sass')
const minifyCSS = require('gulp-minify-css')

gulp.task('sass', function () {
  gulp.src('stylesheets/**/*.sass')
    .pipe(sass())
    .pipe(minifyCSS())
    .pipe(gulp.dest('dist/css'))
})

压缩图像

npm install gulp-imagemin -D

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

gulp.task('images', function () {
  gulp.src('images/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'))
})