gulp用来优化我们的workflow。全局安装：npm install --global gulp项目安装：npm install --save-dev gulp运行gulp:gulp引用使用：gulpfile.js放在项目根目录下var gulp = require(gul ...
gulp用来优化我们的workflow。var gulp = require('gulp');});
搭建Gulp
→ 全局安装：npm install -g gulpvar gulp = require('gulp');
开始使用
→ 在项目根目录下创建src文件夹a.js:b.js:c.js:→ npm install gulp-concat在项目根目录下多了dist文件夹，里面有一个all.js文件：console.log('a.js');console.log('b.js');console.log('c.js');
任务依赖
→ 在gulpfile.js中增加一个任务
var gulp = require('gulp');var concat = require('gulp-concat');gulp.task('js', function(){ gulp.src('src/*.js') .pipe(concat('all.js')) //合并的文件名 .pipe(gulp.dest('dist')); //合并后文件所在的目录});gulp.task('other-js', function(){ gulp.src(['src/a.js', 'src/b.js']) //源头文件，以数组形式 .pipe(concat('two.js')) .pipe(gulp.dest('dist'));});在dist下多了two.js文件：console.log('a.js');console.log('b.js');→ 在gulpfile.js中再增加一个任务，依赖前面的两个任务
var gulp = require('gulp');var concat = require('gulp-concat');gulp.task('js', function(){ gulp.src('src/*.js') .pipe(concat('all.js')) //合并的文件名 .pipe(gulp.dest('dist')); //合并后文件所在的目录});gulp.task('other-js', function(){ gulp.src(['src/a.js', 'src/b.js']) //源头文件，以数组形式 .pipe(concat('two.js')) .pipe(gulp.dest('dist'));});gulp.task('default',['js', 'other-js'], function(){ console.log('hello');});dist文件夹下又多了all.js和two.js文件，说明js和other-js两个任务已经被运行。
监控文件变化，实现自动化
→ 修改gulpfile.js,增加一个任务，监控src中的文件变化，一旦有变化执行default任务
var gulp = require('gulp');var concat = require('gulp-concat');gulp.task('js', function(){ gulp.src('src/*.js') .pipe(concat('all.js')) //合并的文件名 .pipe(gulp.dest('dist')); //合并后文件所在的目录});gulp.task('other-js', function(){ gulp.src(['src/a.js', 'src/b.js']) //源头文件，以数组形式 .pipe(concat('two.js')) .pipe(gulp.dest('dist'));});gulp.task('default',['js', 'other-js'], function(){ console.log('hello');});gulp.task('watch', function(){ gulp.watch('src/*',['default']);});控制台提示正在watching→ 打开a.js文件修改并保存console.log('a.js');在all.js中也有了相应的变化：console.log('a.js');console.log('c.js');→ 先终止监控进入到dist文件夹下的所有js, css, image文件都是经过压缩的。
同时输出压缩和未压缩js文件
→ 修改gulpfile.js文件
var gulp = require('gulp');var concat = require('gulp-concat');var uglify = require('gulp-uglify');gulp.task('js', function(){ gulp.src('src/*.js') .pipe(concat('all.js'))//导出一个没有压缩的文件 .pipe(gulp.dest('dist')) .pipe(uglify()) //压缩 .pipe(concat('all.min.js'))//导出一个压缩文件 .pipe(gulp.dest('dist'));});在dis下同时输出all.js和all.min.js文件。
使用gulp-htmlbuild替代html中的某个部分
→ npm install gulp-htmlbuild→ 修改gulpfile.js文件
var gulp = require('gulp');var htmlbuild = require('gulp-htmlbuild');gulp.task('html', function(){ gulp.src('src/index.html') .pipe(htmlbuild({ js: htmlbuild.preprocess.js(function(block){ block.write('hello.js'); block.end(); }) })) .pipe(gulp.dest('dist'));});在dis下多了一个index.html文件如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <script src='/images/loading.gif' data-original="hello.js"></script></body></html>
控制台显示：1 spec, 0 failures→ 在src下添加一个app.coffee文件
add = (a, b) -> a + b;result = add 2,2console.log result
在dist文件夹下多了app.js和style.css文件
搭建本地服务器→ npm install gulp-connect→ 控制台运行：gulp可以看到页面内容。→ 修改src下的index.html内容，并保存http://localhost:8000/中的页面内容也有相应的变化。
文件流
→ 在项目根目录下创建doc.txt在根目录下多了一个doc-uppercase.txt文件，里面的内容大写。
捕获异常
→ 修改gulpfile.js文件
var gulp = require('gulp');var coffee = require('gulp-coffee');var concat = require('gulp-concat');function handleError(error){ console.log(error); this.emit('end');}gulp.task('coffee', function(){ return gulp.src('src/*.coffee') .pipe(coffee()) .on('error', handleError) .pipe(concat('all.js')) .pipe(gulp.dest('dist/'));});gulp.task('watch',['coffee'], function(){ gulp.watch('src/*.coffee',['coffee']);});→ 在src下的app.coffee文件中故意制造错误在控制台出现错误提示
自写一个插件
→ npm install through2在src下多了txt后缀的文件，并且内容都为大写。
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：Gulp快速入门
关键词：
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
