准备工作
- 新建项目目录
mkdir learn-gulp
- 在项目根目录下安装 Gulp
cd learn-gulp
npm init -y
npm install gulp -D
- 修改 package.json 文件
"scripts": {
"gulp": "gulp"
}
- 在项目根目录下创建
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'))
})