你的位置:首页 > Java教程

[Java教程]Gulp快速入门


 

gulp用来优化我们的workflow。


全局安装:npm install --global gulp
项目安装:npm install --save-dev gulp
运行gulp:gulp
引用使用:gulpfile.js放在项目根目录下

var gulp = require('gulp');
gulp.task('default', function(){

});



搭建Gulp



→ 全局安装:npm install -g gulp
→ 项目安装:npm install gulp, 安装完后在项目文件夹下多了一个node_modules文件夹,内含gulp文件夹
→创建gulpfile.js,在根目录下创建,编写如下

var gulp = require('gulp');



开始使用



→ 在项目根目录下创建src文件夹
→ 在src下创建a.js, b.js, c.js

a.js:
console.log('a.js');

b.js:
console.log('b.js');

c.js:
console.log('c.js');

→ npm install gulp-concat
→ 在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 js

在项目根目录下多了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'));});

 

→ 在控制台输入:gulp other-js

在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下的所有文件
→ 在控制台输入:gulp default(也可以输入gulp,因为default是默认的任务名称)

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']);});

 

→ 控制台运行:gulp watch

控制台提示正在watching

→ 打开a.js文件修改并保存

console.log('a.js');
console.log('updated');

在all.js中也有了相应的变化:

console.log('a.js');
console.log('updated');
console.log('b.js');

console.log('c.js');


优化css, javascript,以及图片



→ 先终止监控
ctrl+c
→ npm install gulp-uglify gulp-minify-css gulp-imagemin
→ 在src文件夹下加入图片和css文件
→ 修改gulpfile.js

 

var gulp = require('gulp');var concat = require('gulp-concat');var uglify = require('gulp-uglify');var minify = require('gulp-minify-css');var imagemin = require('gulp-imagemin');//优化js文件gulp.task('js',function(){  gulp.src('src/*.js')    .pipe(concat('all.js'))    .pipe(uglify())    .pipe(gulp.dest('dist'));});//优化css文件gulp.task('css',function(){  gulp.src('src/*.css')    .pipe(minify())    .pipe(gulp.dest('dist'));});//优化图片gulp.task('images',function(){  gulp.src('src/*.jpg')    .pipe(imagemin())    .pipe(gulp.dest('dist'));});gulp.task('default',['js','css','images'])

 

→ 控制台运行:gulp

进入到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'));});

 

→ 控制台运行:gulp js

在dis下同时输出all.js和all.min.js文件。



使用gulp-htmlbuild替代html中的某个部分



→ npm install gulp-htmlbuild
→ 在src下创建index.html

 

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <!-- htmlbuild:js --> <script src="a.js"></script> <script src="b.js"></script> <script src="c.js"></script> <!-- endbuild --></body></html>

 

<!-- htmlbuild:js -->和<!-- endbuild -->之内的可以被替换掉。

→ 修改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'));});

 

→ 控制台运行:gulp html

在dis下多了一个index.html文件如下:

 

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <script src="hello.js"></script></body></html>

 

使用Jasmine检测代码

 

→ npm install gulp-jasmine
→ 在src文件夹下创建一个multiply.js文件

 

module.exports = function(left, right){  return left * right;};

 

→ 在项目根目录下创建一个spec文件夹
→ 在spec文件夹下创建multiplye.js用来测试src文件夹下的multiply.js文件中的方法

 

var multiply = require('../src/multiply');describe('multiply', function(){  it('multiplies two numbers together', function(){    expect(multiply(2,3)).toEqual(6);  });});

 

→ 修改gulpfile.js文件

 

var gulp = require('gulp');var jasmine = require('gulp-jasmine');gulp.task('test', function(){  gulp.src('spec/*.js')    .pipe(jasmine());});

 

→ 在控制台运行:gulp test

控制台显示:1 spec, 0 failures


预编译less和CoffeeScript文件



→ 在src下添加一个app.coffee文件

 

add = (a, b) -> a + b;result = add 2,2console.log result

 

→ 在src下添加一个style.less文件

 

@nice-color:#593AD;#header{ color: @nice-color;}

 

→ npm install gulp-coffee gulp-less
→ 修改gulpfile.js文件

 

var gulp = require('gulp');var coffee = require('gulp-coffee');var less = require('gulp-less');gulp.task('coffee', function(){  gulp.src('src/*.coffee')    .pipe(coffee())    .pipe(gulp.dest('dist'));});gulp.task('less', function(){  gulp.src('src/*.less')    .pipe(less())    .pipe(gulp.dest('dist'));});gulp.task('default',['coffee','less']);

 

→ 控制台运行:gulp

在dist文件夹下多了app.js和style.css文件



搭建本地服务器

→ npm install gulp-connect
→ src目录下有一个index.html文件
→ 修改gulpfile.js文件

 

var gulp = require('gulp');var connect = require('gulp-connect');gulp.task('copy', function(){  return gulp.src('src/index.html')    .pipe(gulp.dest('dist/'))    .pipe(connect.reload());});gulp.task('watch', function(){  gulp.watch('src/index.html',['copy']);});gulp.task('connect', function(){  connect.server({   port: 8000,   root: 'dist/',   livereload: true  });});gulp.task('default',['copy','watch','connect']);

 

以上,把src下的index.html文件拷贝到dist下,并对src下的index.html文件进行监控,并搭建了一个服务器。

→ 控制台运行:gulp
→浏览器输入http://localhost:8000/

可以看到页面内容。

→ 修改src下的index.html内容,并保存

http://localhost:8000/中的页面内容也有相应的变化。



文件流



→ 在项目根目录下创建doc.txt
→ 在项目根目录下创建uppercase.js,用来在根目录下创建另外一个txt文件吧doc.txt中的字母转换成大写

 

var fs = require('fs');var input = fs.createReadStream('doc.txt');var output = fs.createWriteStream('doc-uppercase.txt');input.on('readable', function(){  output.write(input.read().toString().toUpperCase());});input.on('end', function(){  output.end();});

 

→ 控制台运行:node uppercase.js

在根目录下多了一个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']);});

 

→ 控制台运行:gulp watch

→ 在src下的app.coffee文件中故意制造错误

在控制台出现错误提示



自写一个插件



→ npm install through2
→ 在根目录下创建gulp-capitalize.js文件

 

var through = require('through2');module.exports = function gulpCapitalize(){ return through.obj(function(file, enc, cb){   if(file.isNull()){     return cb(null, file);   }   if(file.isStream()){     this.emit('error', new PluginError('gulp-capitalize','Streams are not supported'));     return cb();   }   if(file.isBuffer()){     file.contents = new Buffer(file.contents.toString(enc).toUpperCase());   }   cb(null, file); });};

 

→ 修改gulpfile.js文件

 

var gulp = require('gulp');var capitalize = require('./gulp-capitalize');function handleError(error){  console.log(error);  this.emit('end');}gulp.task('default', function(){  return gulp.src('*.txt')    .pipe(capitalize())    .on('error', handleError)    .pipe(gulp.dest('dist'));});

 

→ 控制台运行:gulp

在src下多了txt后缀的文件,并且内容都为大写。