gulp使用总结

gulp使用总结

gulp常用API

1. watch
2. task
3. dest
4. src
   说明：run方法已经摒弃了，用gulp.task(taskName, [targetTaskName], fn)或gulp.watch(path, targetTaskName/[targetTaskName])来代替

gulp.watch

• gulp.watch(path, taskName/taskNameArray);

gulp.task

• gulp.task(taskName, fn);

gulp.dest

• gulp.dest(targetPath);

gulp.src

• gulp.src(sourcePath, option)

gulp.src(['src/js/*.js', 'src/js/controllers/*.js'], {base: 'src/js'})
//...
//option:基目录，在gulp.src()的第二个参数添加该值，会使目标目录按照源目录结构生成。确保目标文件在基目录下。

文件匹配

范例	说明	功能描述
js/name.js	文件相对路径+后缀	>>精确匹配
js/*.js	文件夹相对路径 + * + 后缀	>>范围匹配，匹配某个文件夹下指定后缀的所有子文件
js/**/*.js	文件夹相对路径 + **/* + 后缀	>>范围匹配，匹配某个文件夹下指定后缀的所有文件
!js/name.js	! + 文件相对路径 + 后缀	>>从匹配结果中排除该文件， 相当于“非”

plug/*.(js|css) 文件夹相对路径 + /*. + 后缀名1|后缀名2 >>匹配某个文件夹下面指定的两个后缀的所有文件，相当于或

gulp常用插件

压缩

1. gulp-uglify 压缩js
   使用npm包安装：npm install gulp-uglify --save-dev

var minifyJs = require('gulp-uglify');
gulp.src(example.js)
.pipe(minifyJs())
.pipe(gulp.dest(OUTPUTPATH));

2. gulp-minify Minify JavaScript with UglifyJS2.与上面的插件相比较，这个插件默认会生成一个带-min的文件,一般使用上面的压js
3. gulp-minify-css 压缩css
   使用npm包安装：npm install gulp-minify-css --save-dev

var minifyCss = require('gulp-minify-css');
gulp.src(example.css)
.pipe(minifyCss())
.pipe(gulp.dest(OUTPUTPATH));

3. gulp-minify-html 压缩html
   使用npm包安装：npm install gulp-minify-html --save-dev

var minifyHtml = require('gulp-minify-html');
gulp.src(example.html)
.pipe(minifyHtml())
.pipe(gulp.dest(OUTPUTPATH));

合并

1. gulp-concat 合并文件并命名
   使用npm包安装：npm install gulp-concat --save-dev

var concat= require('gulp-concat');
gulp.src(src/css/ *.css)
.pipe(minifyCss())
.pipe(concat(NEWNAME))    //NEWNAME包括后缀
.pipe(gulp.dest(OUTPUTPATH));

版本管理

1. gulp-uncache
   参数：

   • append
     • time(时间戳,默认)
     • hash(md5 hash of file，prevent unnecessary refreshing file，需要正确的源目录和输出目录)
   • rename(默认，false)
   • srcDir(默认，./)
   • distDir(默认，./)
   • template 默认：{{path}}{{name}}_{{append}}.{{extension}}
   • 对比：需要在html页面指定插件作用的范围。指定方式：

   <!-- uncache -->
   <script type="javascript" src="example.js"></script>
   <!-- enduncache -->
   

2. gulp-rev-mtime

3. gulp-rev 和 gulp-rev-collector

生成package.json文件

1. 首先在目标文件夹下右键选择git bash（需要安装git）。
2. 执行npm init指令。
3. 按照提示进行操作， 默认会将gulpfile.js文件中require的gulp插件载入到新建的package.json文件中。

快速搭建gulp生产环境

拿到之前做的项目的packa.json文件，使用npm install指令，自动下载该文件中"devDependencies"下的插件。

使用gulp过程中遇到的问题

1. css样式任务不起作用

//代码
var usemin = require('gulp-usemin'),
    less = require('gulp-less'),
    minifyCss = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    autoprefixer = require('gulp-autoprefixer');
gulp.task('html', function() {
    gulp.src('developer/html/*.html')
			.pipe(usemin())
			.pipe(minifyHtml())
			.pipe(gulp.dest('client/html/'));
    gulp.src('developer/index.html')
			.pipe(usemin())
			.pipe(minifyHtml())
			.pipe(gulp.dest('client/'));
});
gulp.task('css', function(){
    gulp.src('developer/css/')
        .pipe(less())
        .pipe(autoprefixer())
        .pipe(minifyCss())
        .pipe(concat('main.min.css'))
        .pipe(gulp.dest('client/css/'));
});
gulp.task('auto', ['css'], function() {
    gulp.watch('developer/css/**',['css']);
    gulp.watch(['developer/html/*.html', 'developer/index.html'], ['html']);
});

问题描述:执行gulp auto后发现样式文件并没有导到client/css/main.min.css文件中。
排查：与gulp-usemin插件存在冲突，导致'html'任务执行后'css'失效，且gulp未提示。
解决方案:用gulp-html-replace插件替代，使用方式如下：

<!--html部分-->
<!--build:css ../css/main.min.css-->
    <link rel="stylesheet" href="../css/public.css"/>
    <link rel="stylesheet" href="../css/agentLogin.css"/>
<!--endbuild-->
<!--说明：css："name，标志符"；
       ../css/main.min.css："准备被替换的路径"；-->

var htmlreplace = require('gulp-html-replace');
gulp.task('html', function() {
    gulp.src('example.html').
    pipe(htmlreplace({
        'css': '../css/main.min.css'
    }))
    .pipe(gulp.dest('dist'));
})

2. 版本管理使用gulp-rev-mtime插件时，报错。错误信息： no such file or directory, stat 'G:\1\hy_homeabacus\webQuote\plug\jQuery\jquery-1.10 .2.min.js'
3. 进行版本管理的控制时， 处理Css的代码段和处理Js的代码段在不同位置带来的结果不同。

//其他代码略
//目标任务
gulp.task('prevRev', ['cleanJsCss'], function (){
	//清空client下的js和css文件
	//为developer下的所有js和css文件添加版本号导入到client下，并生成.json文件
        
        //处理Js文件
	gulp.src([webQuote + '/developer/js/*.js', webQuote + '/developer/js/controllers/*.js'], options)
	.pipe(minifyJs())
	.pipe($.rev())		//与‘js|styles任务不同的地方’
	.pipe(gulp.dest(webQuote + '/client/js'))
	.pipe($.rev.manifest())		//与‘js|styles任务不同的地方’ ,下同
	.pipe(gulp.dest(webQuote + '/client/rev/js'));

	//处理Css文件
	return gulp.src( [webQuote + '/developer/css/*.css', webQuote + '/developer/css/*.less']) // return该部分代码将发生Js文件在html页面的引用不会被替换的问题
	.pipe(less())
	.pipe(autoprefixer())
	.pipe(concat('main.min.css'))
	.pipe(minify())
	.pipe($.rev())
	.pipe(gulp.dest(webQuote + '/client/css'))
	.pipe($.rev.manifest())
	.pipe(gulp.dest(webQuote + '/client/rev/css'));

	//调换处理Css和处理Js代码段的位置解决了js文件引用未替换的问题。为什么？
});
gulp.task('rev', ['prevRev'], function() {

	//根据.json文件替换client文件夹下各html文件的引用
	var src = [
		webQuote + '/client/rev/css/*.json',
		webQuote + '/client/rev/js/*.json',
		fspwork + '/client/**/*.html'
	];
	gulp.src(src)
		.pipe($.revCollector())
		.pipe(gulp.dest(fspwork + '/client'));
});
//其他代码略

执行结果截图：
![](http://images2015.cnblogs.com/blog/969755/201609/969755-20160926174845547-1386899662.png)
![](http://images2015.cnblogs.com/blog/969755/201609/969755-20160926174946828-2130026098.png)
在调换两个代码段之后：
![](http://images2015.cnblogs.com/blog/969755/201609/969755-20160926174845547-1386899662.png)
![](http://images2015.cnblogs.com/blog/969755/201609/969755-20160926175207500-1471217700.png)