一. 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自带的工具
使用界面上的快捷方式