gulp 是一款实用的前端自动化构建工具，能够自动执行编译 scss 和 less，压缩 html、css、js 和 img，检测文件改变同时刷新浏览器等常见的前端任务，提高工作效率；
gulp_logo.png
1、安装 node.js
- 因为 gulp 是基于 Node.js 构建的，所以要使用 gulp 计算机要先安装 node.js；
- 下载完安装包后，运行并一直点下一步就能安装完成；
- 打开控制台，输入
node -v查看到版本号则安装成功；
2、全局安装 gulp
- 在命令行输入：
$ npm install gulp-cli -g - 完成之后输入：
$ gulp -v - 查看到版本号则安装成功；
3、初始化项目
在项目根目录输入：$ npm init
初始化完成会生成一个 package.json 文件，里面记录了对该项目的描述
package.json 属性说明
- name：项目名
- version：项目版本
- description：项目描述
- homepage：项目网站 url
- auther：作者信息（可以放在对象里）
- contributors：其他贡献者姓名
- dependencies：依赖包列表
- devDependencies：开发环境依赖包列表
- respository：包的仓库信息（一个包含 type 和 url 属性的对象，type 指 svn 或 git）
- main：模块 ID，一个指向你程序的主要项目
- keywords：关键字
4、局部安装 gulp
切换到项目根目录，输入：
$ npm install gulp --save-dev //或者向下面一样
$ npm install gulp -D
- -D 是
--save-dev的缩写，两者意思完全一样（会将依赖信息添加到package.json的devDependencies中） - 如果只写
--save（缩写为 -S），不加-dev则将依赖信息添加到package.json的dependencies中（一般保存在这里的是express/ejs/body-parser等等）
5、使用 gulp
使用 gulp 必须要会 Gulp API；
- 在
package.json同级目录下创建一个gulpfile.js文件； - 在
gulpfile.js文件中可以开始设置 gulp 流程：
var gulp = require('gulp'); //载入 gulp
gulp.task('default', function() {
// 编写默认任务
});
- 运行 gulp
$ gulp
gulp 后面不加任何参数则执行默认任务
6、gulp 常用插件
js 压缩插件：gulp-uglify
安装：
$ npm install --save-dev jshint gulp-jshint
使用：
var gulp = require('gulp'); //加载gulp
var jsmini= require('gulp-uglify'); //加载 js 压缩插件
gulp.task('jsmini', function () {
gulp.src('app/script/js/*.js') // 获取文件，且 base 指向 app/script
.pipe(jsmini()) // 压缩
.pipe(gulp.dest('minijs/')); // 输出
});
小技巧：可以在文件路径前面加「!」来过滤掉不想操作的文件，！感叹号为排除模式。
css 压缩：gulp-minify-css
安装：
$ npm install --save-dev gulp-minify-css
使用：
var gulp = require('gulp');
var cssmini = require('gulp-minify-css');
gulp.task('cssmini', function () {
gulp.src('app/style/css/*.css')
.pipe(cssmini())
.pipe(gulp.dest('minicss/'));
});
html 压缩：gulp-minify-html
安装：
$ npm install --save-dev gulp-minify-html
使用：
var gulp = require('gulp');
var htmlmini = require('gulp-minify-html');
gulp.task('htmlmini', function () {
gulp.src('app/views/html/*.html')
.pipe(htmlmini())
.pipe(gulp.dest('minihtml/'));
});
js 代码检查：gulp-jshint
安装：
$ npm install --save-dev gulp-jshint
使用：
var gulp = require('gulp');
var jshint= require('gulp-jshint');
gulp.task('jshint', function () {
gulp.src('app/script/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter());
});
文件合并：gulp-concat
安装：
$ npm install --save-dev gulp-concat
使用：
var gulp = require('gulp');
var concat= require('gulp-concat');
gulp.task('concat', function () {
gulp.src('app/script/js/*.js') // 要合并的文件
.pipe(concat('all.js')) // 合并匹配的文件并命名为 all.js
.pipe(gulp.dest('dist/js'));
});
编译 Less：gulp-less
安装：
$ npm install --save-dev gulp-less
使用：
var gulp = require('gulp');
var less= require('gulp-less');
gulp.task('compile-less', function () {
gulp.src('less/*.less')
.pipe(less())
.pipe(gulp.dest('dist/css'));
});
编译 Sass：gulp-sass
安装：
$ npm install --save-dev gulp-sass
使用：
var gulp = require('gulp');
var sass= require('gulp-sass');
gulp.task('compile-sass', function () {
gulp.src('sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('dist/css'));
});
压缩图片：gulp-imagemin
安装：
$ npm install --save-dev gulp-imagemin
使用：
可压缩 jpg、png、gif 等图片，压缩不同的图片要安装不同的 imagemin 插件
本例使用 png 压缩插件
$npm install --save-dev imagemin-pngquant
gulpfile.js
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
gulp.task('pngmin', function () {
return gulp.src('app/images/*')
.pipe(imagemin({
progressive: true,
use: [pngquant()] //使用pngquant来压缩png图片
}))
.pipe(gulp.dest('dist'));
});
自动刷新：gulp-livereload
安装：
$ npm install --save-dev gulp-livereload
使用：
需配合 chrome LiveReload 扩展插件使用
实现所监控文件代码变化时自动刷新页面的功能
var gulp = require('gulp'),
less = require('gulp-less'),
livereload = require('gulp-livereload');
gulp.task('less', function() {
gulp.src('less/*.less')
.pipe(less())
.pipe(gulp.dest('css'))
.pipe(livereload());
});
gulp.task('watch', function() {
livereload.listen(); //要在这里调用listen()方法
gulp.watch('less/*.less', ['less']); //监听目录下的文件，若文件发生变化，则调用less任务。
});
网友评论