自動構建工具祟蚀，優(yōu)點
- 易于使用
代碼優(yōu)于配置策略，復雜任務可管理
- 構建快速
快速構建情妖，減少頻繁IO
- 插件高質
嚴格的插件指南
- 易于學習
- 安裝
// 全局安裝
npm install -g gulp
// 本地安裝作為項目依賴
npm install gulp --save-dev
- 執(zhí)行
// 執(zhí)行任務列表
gulp <task> <othertask>
// 執(zhí)行注冊名為default的task吮播，不存在則會報錯
gulp
- 參數(shù)標記
-v/--version: 顯示gulp版本號
--require <module path>: 執(zhí)行前require一個模塊
--gulpfile <gulpfile path>: 手動指定gulpfile路徑
--cwd <dir path>: 手動指定cwd锅论，定義gulpfile查找的位置
-T/--tasks: 顯示
- API
gulp.src(globs[, options])
gulp.dest(path[, options])
gulp.task(name[, deps], fn)
gulp.watch(glob[, opts], tasks)
gulp.watch(glob[, opts, cb])
- gulp的簡單配置
// gulpfile.js
'use strict';
var gulp = require('gulp');
var less = require('gulp-less');
var minifycss = require('gulp-minify-css');
var rename = require("gulp-rename");
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var gutil = require('gulp-util');
// load plugins
var $ = require('gulp-load-plugins')();
var hash = require('gulp-hash');
var inject = require('gulp-inject');
// handle *.less
gulp.task('styles', function() {
return gulp.src(['less/index.less'])
.pipe(less())
.pipe($.autoprefixer('last 1 version'))
.pipe(minifycss())
.pipe(gulp.dest('css'))
.pipe(reload({stream: true}))
.pipe($.size())
});
// handle *.js
gulp.task('scripts', function() {
return gulp.src('js/index.js')
.pipe($.jshint())
.pipe($.jshint.reporter(require('jshint-stylish')))
.pipe(gulp.dest('js'))
.pipe($.size());
});
// handle html, depend on styles and scripts
gulp.task('html', ['scripts', 'styles'], function() {
var jsFilter = $.filter('**/*.js', {restore: true}),
cssFilter = $.filter('**/*.css', {restore: true});
// 多層級目錄時：gulp.src(['index.html', 'xx/**/*.html])
return gulp.src('index.html')
.pipe($.useref())
.pipe(jsFilter)
.pipe(hash({hashLength: 12}))
.pipe($.uglify())
.pipe(jsFilter.restore)
.pipe(cssFilter)
.pipe(hash({hashLength: 12}))
.pipe($.csso())
.pipe(cssFilter.restore)
.pipe($.useref())
.pipe(gulp.dest('dist'))
.pipe($.size());
});
// handle images
gulp.task('images', function() {
return gulp.src('images/*')
.pipe(gulp.dest('dist/images'))
.pipe(reload({stream: true, once: true}))
.pipe($.size());
});
// clean
gulp.task('clean', function() {
return gulp.src(['dist'], {read: false}).pipe($.clean());
});
// inject
gulp.task('inject', ['html'], function() {
var target = gulp.src('dist/*.html'),
sources = gulp.src([ 'dist/js/vendor-*.js', 'dist/js/index-*.js','dist/css/index-*.css'], {read: false});
return target.pipe(inject(sources, {relative: true}))
.pipe(gulp.dest('dist'));
});
// build
gulp.task('build', ['clean'], function() {
gulp.start(['inject', 'images']);
});
// dev
gulp.task('dev', ['watch']);
// default
gulp.task('default', ['clean'], function() {
gulp.start('build');
});
// browserSync
gulp.task('serve', ['styles'], function () {
browserSync.init({
port: 3200,
server: {
baseDir: ''
}
});
});
// watch
gulp.task('watch', ['serve'], function () {
// watch for changes
// 多層級目錄時：gulp.src(['index.html', 'xx/**/*.html])
gulp.watch(['index.html'], reload);
gulp.watch('less/**/*.less', ['styles']);
gulp.watch('js/**/*.js', ['scripts']);
gulp.watch('img/**/*', ['images']);
});
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- inject:css -->
<!-- build:css css/index.css -->
<link rel="stylesheet" href="css/index.css">
<!-- endbuild -->
<!-- endinject -->
</head>
<body>
</body>
<!-- inject:js -->
<!-- build:js js/vendor.js -->
<script src="vendor/lib.js"></script>
<!-- endbuild -->
<!-- build:js js/index.js -->
<script src="js/index.js"></script>
<!-- endbuild -->
<!-- endinject -->
</html>
// 多層級目錄時：資源使用相對路徑，鏈接使用絕對路徑
