介绍
Gulp.js是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。
随着互联网的逐步发展，前端前景也越来越好，随之而来的 web 业务也变得复杂化和多元化，所以各种前端构建工具也随之产生，常见的有 Grunt 、 Gulp 、 Webpack 三种。本手册就给大家介绍一下 Gulp。
Gulp.js 是一个前端构建工具，与 grunt.js 相比，Gulp.js 无需写一大堆繁杂的配置参数，AP I也非常简单，学习起来很容易，而且 Gulp.js 使用的是 node.js 中 stream 来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得 grunt.js 太难用的话，那就尝试一下Gulp.js吧。
使用Gulp压缩js
npm install gulp-uglify
一、新建一个 gulpfile.js 文件
chapter2
└── gulpfile.js
二、在 gulpfile.js 中编写代码
// 获取 gulp
var gulp = require('gulp')
require() 是 node （CommonJS）中获取模块的语法。
在 gulp 中你只需要理解 require() 可以获取模块。
三、获取 gulp-uglify 组件
// 获取 uglify 模块（用于压缩 JS）
var uglify = require('gulp-uglify')
四、创建压缩任务
// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function() {
// 1\. 找到文件
gulp.src('js/*.js')
// 2\. 压缩文件
.pipe(uglify())
// 3\. 另存压缩后的文件
.pipe(gulp.dest('dist/js'))
})
● gulp.task(name, fn) - 定义任务，第一个参数是任务名，第二个参数是任务内容。
● gulp.src(path) - 选择文件，传入参数是文件路径。
● gulp.dest(path) - 输出文件
● gulp.pipe() - 管道，你可以暂时将 pipe 理解为将操作加入执行队列
使用Gulp压缩CSS
一、安装 gulp-minify-css 模块
二、参照 使用 gulp 压缩 JS 创建 gulpfile.js 文件编写代码
// 获取 gulp
var gulp = require('gulp')
// 获取 minify-css 模块（用于压缩 CSS）
var minifyCSS = require('gulp-minify-css')
// 压缩 css 文件
// 在命令行使用 gulp css 启动此任务
gulp.task('css', function () {
// 1\. 找到文件
gulp.src('css/*.css')
// 2\. 压缩文件
.pipe(minifyCSS())
// 3\. 另存为压缩文件
.pipe(gulp.dest('dist/css'))
})
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改，当文件被修改则执行 css 任务
gulp.watch('css/*.css', ['css'])
});
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 css 任务和 auto 任务
gulp.task('default', ['css', 'auto'])
三、创建 css 文件
在 gulpfile.js 对应目录创建 css 文件夹，并在 css/ 目录下创建 a.css 文件。
四、运行 gulp 查看效果
使用Gulp压缩图片
一、安装 gulp-imagemin 模块
npm install gulp-imagemin
二、创建 gulpfile.js 文件编写代码
// 获取 gulp
var gulp = require('gulp');
// 获取 gulp-imagemin 模块
var imagemin = require('gulp-imagemin')
// 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task('images', function () {
// 1. 找到图片
gulp.src('images/*.*')
// 2. 压缩图片
.pipe(imagemin({
progressive: true
}))
// 3. 另存图片
.pipe(gulp.dest('dist/images'))
});
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改，当文件被修改则执行 images 任务
gulp.watch('images/*.*)', ['images'])
});
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 images 任务和 auto 任务
gulp.task('default', ['images', 'auto'])
三、在 images/ 目录下存放图片
在 gulpfile.js 对应目录创建 images 文件夹，并在 images/ 目录下存放图片。
四、运行 gulp 查看效果
使用 gulp 编译 LESS
安装
npm install gulp-less
基本用法
// 获取 gulp
var gulp = require('gulp')
// 获取 gulp-less 模块
var less = require('gulp-less')
// 编译less
// 在命令行输入 gulp images 启动此任务
gulp.task('less', function () {
// 1. 找到 less 文件
gulp.src('less/**.less')
// 2. 编译为css
.pipe(less())
// 3. 另存文件
.pipe(gulp.dest('dist/css'))
});
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改，当文件被修改则执行 images 任务
gulp.watch('less/**.less', ['less'])
})
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 less 任务和 auto 任务
gulp.task('default', ['less', 'auto'])
使用 gulp 编译 Sass
安装
npm install gulp-ruby-sass
基本用法
// 获取 gulp
var gulp = require('gulp')
// 获取 gulp-ruby-sass 模块
var sass = require('gulp-ruby-sass')
// 编译sass
// 在命令行输入 gulp sass 启动此任务
gulp.task('sass', function() {
return sass('sass/')
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(gulp.dest('dist/css'))
});
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改，当文件被修改则执行 images 任务
gulp.watch('sass/**/*.scss', ['sass'])
});
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 sass 任务和 auto 任务
gulp.task('default', ['sass', 'auto'])
gulpjs文件编辑
var gulp= require('gulp');
var gulp= require('gulp-rev');给每个文件添加版本号更具每个文件的哈希码
var gulp= require('gulp-filter');过滤器筛选出来，对其处理
var gulp= require('gulp-uglify');压缩js代码
var gulp= require('gulp-rev-replace');
var gulp= require('gulp-useref');利用注释写一些合并文件的命令
var gulp= require('gulp-csso');压缩css
gulp.task('default',function () {
var jsFilter = filter('**/*.js',{
restore:true});
var cssFilter = filter('**/*.css',{
restore:true});
var indexHtmlFilter = filter('**/*','!**/index.html',{
restore:true});
return gulp.src('src/index.html')
.pipe(useref())
.pipe(jsFilter)
.pipe(uglify())
.pipe(jsFilter.restore)
.pipe(cssFilter)
.pipe(csso())
.pipe(cssFilter.restore)
.pipe(indexHtmlFilter)
.pipe(rev())
.pipe(indexHtmlFilter.restore);
});