一. gulp 安装
创建package.json文件
npm init
全局安装 gulp：
npm install --global gulp
作为项目的开发依赖（devDependencies）安装：
npm install --save-dev gulp
二. 基本 API
-
gulp.src(glob[, options])- 根据
glob匹配文件，返回stream，可以通过.pipe()方法传递给后续的插件。
- 根据
-
gulp.dest(path[, options])- 一般用法
.pipe(gulp.dest(path))，把pipe中的内容按照指定的path写成文件，会自动创建不存在的文件夹。 - 注意，可以通过
.pipe多次指定输出的地方，具体请看 这里
- 一般用法
-
gulp.task(name[, deps], fn)- 定义名为
name的任务，定义之后就可以在命令行中使用gulp xxx来执行任务。 -
deps里面的任务全部完成后才会执行fn -
deps里面的任务都是并行执行的，如果需要顺序执行，需要特殊写法。具体看 这里
- 定义名为
-
gulp.watch(glob[, opts, cb])- 监听文件变化
- 不会监听新文件（目录），所以一般你会需要
gulp-watch -
watch方法路径不要用'./xx'，用'./xx'开头作为当前路径开始，会导致无法监测到新增文件，所以直接省略掉'./'即可。
三. 安装插件
1. Browsersync
省时的浏览器同步测试工具，Browsersync可以同时在PC、平板、手机等设备下进项调试。
Install
$ npm install --save-dev browser-sync
Usage （gulpfile.js 文件）
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
// 本地服务器
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: "./"
},
port:'8080'
});
});
2. gulp-autoprefixer
Install
$ npm install --save-dev gulp-autoprefixer
Usage
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer');
gulp.task('autoprefixer', function () {
gulp.src('src/css/index.css')
.pipe(autoprefixer({
browsers: ['last 2 versions', 'Android >= 4.0'],
cascade: true, //是否美化属性值 默认：true 像这样：
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove:true //是否去掉不必要的前缀 默认：true
}))
.pipe(gulp.dest('dist/css'));
});
gulp-autoprefixer的browsers参数详解 （传送门）：
- last 2 versions: 主流浏览器的最新两个版本
- last 1 Chrome versions: 谷歌浏览器的最新版本
- last 2 Explorer versions: IE的最新两个版本
- last 3 Safari versions: 苹果浏览器最新三个版本
- Firefox >= 20: 火狐浏览器的版本大于或等于20
- iOS 7: IOS7版本
- Firefox ESR: 最新ESR版本的火狐
- > 5%: 全球统计有超过5%的使用率
3. gulp-less
Usage
var gulp = require('gulp');
var less = require('gulp-less');
gulp.task('less', function () {
gulp.src('src/less/*.less')
.pipe(less())
.pipe(gulp.dest('src/css'));
});
四.运行
1. 使用命令
以上面的例子为例：
$ gulp browserSync
默认情况下直接运行gulp
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
运行 gulp：
$ gulp
2. 使用webstrom自带的工具
使用界面上的快捷方式
