一. gulp 安裝
創(chuàng)建package.json文件
npm init
全局安裝 gulp：
npm install --global gulp
作為項目的開發(fā)依賴（devDependencies）安裝：
npm install --save-dev gulp
二. 基本 API
-
gulp.src(glob[, options])- 根據(jù)
glob匹配文件喻喳，返回stream迎捺，可以通過.pipe()方法傳遞給后續(xù)的插件誓酒。
- 根據(jù)
-
gulp.dest(path[, options])- 一般用法
.pipe(gulp.dest(path))，把pipe中的內容按照指定的path寫成文件压储，會自動創(chuàng)建不存在的文件夾。 - 注意，可以通過
.pipe多次指定輸出的地方，具體請看 這里
- 一般用法
-
gulp.task(name[, deps], fn)- 定義名為
name的任務，定義之后就可以在命令行中使用gulp xxx來執(zhí)行任務略就。 -
deps里面的任務全部完成后才會執(zhí)行fn -
deps里面的任務都是并行執(zhí)行的捎迫，如果需要順序執(zhí)行，需要特殊寫法表牢。具體看 這里
- 定義名為
-
gulp.watch(glob[, opts, cb])- 監(jiān)聽文件變化
- 不會監(jiān)聽新文件（目錄）窄绒，所以一般你會需要
gulp-watch -
watch方法路徑不要用'./xx'，用'./xx'開頭作為當前路徑開始崔兴，會導致無法監(jiān)測到新增文件彰导，所以直接省略掉'./'即可。
三. 安裝插件
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參數(shù)詳解 （傳送門）：
- 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%: 全球統(tǒng)計有超過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自帶的工具
使用界面上的快捷方式
