gulp html压缩 war,gulp总结

安装

npm install gulp

新建gulpfile.js

gulpfile.js是gulp项目的配置文件。

运行gulp

命令行输入gulp default或gulp。

若想要执行单个任务，输入gulp 。

插件

常用的一些插件

gulp-sass

功能：把 sass 编译为 css

gulp-uglify

功能：压缩(optimize)js 文件

gulp-rename

功能：重命名文件

gulp-concat

功能：合并文件。

APIs

gulp.src(globs[, options])

globs： 需要处理的源文件匹配符路径。类型(必填)：String or StringArray；

通配符路径匹配示例：

“src/a.js”：指定具体文件；

“*”：匹配所有文件 例：src/*.js(包含src下的所有js文件)；

“**”：匹配0个或多个子文件夹 例：src/*/.js(包含src的0个或多个子文件夹下的js文件)；

“{}”：匹配多个属性 例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；

“!”：排除文件 例：!src/a.js(不包含src下的a.js文件)；

options： 类型(可选)：Object，有3个属性buffer、read、base；

options.buffer： 类型：Boolean 默认：true 设置为false，将返回file.content的流并且不缓冲文件，处理大文件时非常有用；

options.read： 类型：Boolean 默认：true 设置false，将不执行读取文件操作，返回null；

options.base： 类型：String 设置输出路径以某个路径的某个组成部分为基础向后拼接

gulp.dest(path[, options])

path： 类型(必填)：String or Function 指定文件输出路径，或者定义函数返回文件输出路径亦可；

options： 类型(可选)：Object，有2个属性cwd、mode；

options.cwd： 类型：String 默认：process.cwd()：前脚本的工作目录的路径 当文件输出路径为相对路径将会用到；

options.mode： 类型：String 默认：0777 指定被创建文件夹的权限；

gulp.task(name[, deps], fn)

task定义一个gulp任务；

name： 类型(必填)：String 指定任务的名称(不应该有空格)；

deps： 类型(可选)：StringArray，是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数；

fn： 类型(必填)：Function 该任务调用的插件操作；

当有多个任务时，需要知道怎么来控制任务的执行顺序，可以通过任务依赖来实现

gulp.task('one',function(){

//one是一个异步执行的任务

setTimeout(function(){

console.log('one is done')

},5000);

});

//two任务虽然依赖于one任务,但并不会等到one任务中的异步操作完成后再执行

gulp.task('two',['one'],function(){

console.log('two is done');

});

gulp.task('default',['one','two','three']);

如果想等待异步任务中的异步操作完成后再执行后续的任务，有三种方法可以实现：

第一：在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成，这个回调函数就是任务函数的第一个参数。

gulp.task('one',function(cb){ //cb为任务函数提供的回调，用来通知任务已经完成

//one是一个异步执行的任务

exec(function(){

console.log('one is finish');

cb(); //执行回调，表示这个异步任务已经完成

},5000);

});

//这时two任务会在one任务中的异步操作完成后再执行

gulp.task('two',['one'],function(){

console.log('two is finish');

});

第二：定义任务时返回一个流对象。适用于任务就是操作`gulp.src获取到的流的情况。

gulp.task('one',function(cb){

var stream = gulp.src('client/**/*.js')

.pipe(exec()) //exec()中有某些异步操作

.pipe(gulp.dest('build'));

return stream;

});

gulp.task('two',['one'],function(){

console.log('two is done');

});

第三：返回一个promise对象，例如

var Q = require('q');

gulp.task('one', function() {

var deferred = Q.defer();

// 执行异步的操作

setTimeout(function() {

deferred.resolve();

}, 1);

return deferred.promise;

});

gulp.task('two',['one'],function(){

console.log('two is done');

});

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

watch方法是用于监听文件变化，文件一修改就会执行指定的任务；

glob： 需要处理的源文件匹配符路径。类型(必填)：String or StringArray；

opts： 类型(可选)：Object 具体参看https://github.com/shama/gaze；

tasks： 类型(必填)：StringArray 需要执行的任务的名称数组；

gulp.run()

表示要执行的任务。可能会使用单个参数的形式传递多个任务。

gulp.task('end',function(){

gulp.run('task1','task3','task2');

});

注意：任务是尽可能多的并行执行的，并且可能不会按照指定的顺序运行。

var gulp = require( 'gulp' );

var uglify = require( 'gulp-uglify' );

var cleanCSS = require( 'gulp-clean-css' );

var less = require('gulp-less');

var concat = require('gulp-concat');

gulp.task( 'concat-file', function(){

gulp.src( 'src/js/*.js' )

.pipe( concat('all.min.js') )

.pipe( uglify() )

.pipe( gulp.dest( 'dist/js' ) );

} );

gulp.task('testLess', function () {

//gulp.src('less/test/style.less')

gulp.src(['less/**/*.less','!less/{extend,page}/*.less'])

.pipe(less())

.pipe(gulp.dest('./css'));

});

gulp.task('watcher', function() {

gulp.watch("src/scss/**/*.scss", ['sass']);

gulp.watch("src/js/*.js", ['scripts']);

});

gulp.task('css-watch', ['concat-file'], function() {

var watcher = gulp.watch('src/css/sass/**/*.scss', ['css']);

watcher.on('change', function(event) {

console.log(event);

});

});

gulp.task('default', ['watcher', 'css-watch']);

同步运行任务

因为任务是异步运行的，Gulp 便默认将并行运行所有任务；任务中的步骤也是异步的，因此各个步骤也是并行的。

gulp-sequence

var gulp = require('gulp');

var zip = require('gulp-zip');

var rename = require('gulp-rename');

var clean = require('gulp-clean');

var sequence = require('run-sequence');

gulp.task("copy-common1", function () {

return gulp.src(['client/**/**', '!client/dev.html', '!client/index.hbs', 'build/**/**'])

.pipe(rename(function (path) {

path.dirname += '';

}))

.pipe(gulp.dest("./dist/pages"))

})

//清空dist目录

gulp.task("clean", function () {

console.log('清空 dist 目录下的资源')

return gulp.src('dist/*', {

read: false

})

.pipe(clean({

force: true

}));

})

//生成生产war包

gulp.task("package", function () {

gulp.src(['dist/**']).pipe(zip('dist.war')).pipe(gulp.dest('./'));

console.info('package ok!');

});

gulp.task('runsequence', function (callback) {

sequence('clean', 'copy-common1', 'package', callback)

});