gulp插件 - ocean111/oceanblog GitHub Wiki

gulp插件

项目中使用到gulp插件，针对css、js、img进行压缩，合并，添加版本号，自动化的流程实现项目

source = 'http://www.cnblogs.com/2050/p/4198792.html';

var gulp = require('gulp');

gulp.task('inint',function(){
	
	//anything

})

gulp.task('aal',['arr','inint'],function(){
	
	// anything amount

})
	
//任务是否在这些前置依赖的任务完成之前运行，确保依赖的任务列表中使用正确的异步执行方式

//使用callback、promise、stream均可
	
//gulp原理 ：基于node的流stream为媒介
	
//gulp.src()方法获取的不是原始的流，而是虚拟的文件对象流，存储着相关的路径、文件名、内容
	
//本质用这个方法去读取你需要操作的文件
	
gulp.src(globs[,options]) //语法
	
/**
* @param globs 文件匹配模式 （类似正则） 包含多种匹配模式
*/
	
//gulp 内部使用 node-golb模块实现文件匹配功能
	
gulp.dest(path,[,options]) //语法
	
//path 文件路径
	
//使用gulp.src方法获取文件流，使用pipe方法导入到gulp插件中，最后把插件处理好的流导入gulp.dest
	
//最终文件名还是流本身
	
gulp.src('srcipt/jquery.js)
		
		.pipe(gulp.dest('dist/foo.js'));
				 
//最终生成文件路径为dist/foo.js/jquery.js ,而不是 dist/foo.js

	
var concatafile = require('gulp-concat),  // 合并
													
		uglifyJS = require('gulp-uglify'), // 混淆
		
		shell = require("gulp-shell"), // 
		
		amdoptimize = require('amd-optimize');

demo ..........................
	
require('gulp-load-plugins') //依赖package.json 自动加载所需插件
	
{
	package.json:{
		
		gulp-rename : '~0.0.1',
		
		gulp-ruby-sass : '~0.0.2'
		
	}
	
	eg : gulp-load-plugins
		
	var plugins = require('gulp-load-plugins') (); //自动执行、自动加载
	
	//需要使用时
	
	plugins.rename;
	
	plugins.rubySass; //驼峰式写法
}
 
require('gulp-rename') //正常情况 desk 只改变路径 修改名称需要在这之前完成
	
require('gulp-uglify') //js压缩  

require('gulp-minify-css') //css压缩  
	
require('gulp-minify-html') //html压缩 
	
require('gulp-jshint') //js代码检查
	
require('gulp-concat') //文件合并
	
require('gulp-imagemin') //图片压缩

{
	src : 'https://www.npmjs.com/package/gulp-rename' //扩展
	
	eg : gulp-rename
	
	gulp.task('rename',function(){
		
		gulp.src('js/jquery.js')
	
			.pipe(uglify()) //压缩
			
			.pipe(rename('jquery.min.js')) // 将jq重命名jq.min.js
			
			.pipe(gulp.dest('js')); //输出
	
	})
}

ending 正则 ..........................
	
* 匹配文件路径中0个\多个字符，但不会匹配路径分隔符
	
	eg: a.js , x.y , abc , abc/, 但不能匹配 a/b.js
		
*.* 匹配文件0/多个/子目录，需要单独出现
	
	eg: a.js , style.css , a.b , a.y
		
*/*/*.js 能匹配a/b/c.js ,不能匹配 a/b.js , a/b/c/d.js

** 能匹配abc , a/b.js , a/b/c.js 匹配所有文件

**/*.js 能匹配 foo.js , a/foo.js , a/c/foo.js
	
a/**/z 能匹配 a/z , a/b/z , a/c/d/d/f/z ;首尾对应
	
？ 匹配文件路径中的一个字符
	
[...]  匹配 首字母 ^ !时不匹配任何
	
多种匹配模式时可以使用数组 
	
gulp.src ( ['js/*.js','css/*.css'] );

使用数组的好处方便使用排除法