前言
gulp的运行依赖与node.js，因此需保证node.js已经安装，node.js的下载地址https://nodejs.org/en/ ,
以下操作在windows环境下完成，在其他操作系统其实也是相似的
一，安装gulp
cmd进入命令行输入命令：
npm install -g gulp //-g表示全局安装做项目依赖安装
npm install --save-dev gulp二，gulp使用
1.新建js项目，例如：gulpTest
(1)初识gulp使用
在gulpTest根目录下创建gulpfile.js文件，然后在gulpfile.js输入以下代码
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});gulpfile.js其实就是gulp运行构建的执行文件
在命令行执行：cd gulpTest 然后执行gulp即可
(2).使用gulp压缩js文件
接着在gulpTest项目目录下新建一个目录js,然后在js目录下创建一个app.js的文件并在该文件中写入如下代码
function sayHello(){
console.log("hello");
}打开gulpfile.js文件修改下里面的内容
var gulp = require('gulp');//加载gulp模块
uglify = require('gulp-uglify');//加载gulp-uglify压缩模块
gulp.task('minify', function () {//自定一个名为minify的gulp任务
gulp.src('js/app.js')//载入js文件为对象流
.pipe(uglify())//通过管道将对象流传递给uplify()方法得到压缩后的文件对象流
.pipe(gulp.dest('build'))//将压缩后的文件对象流通过管道传递给gulp.test()方法输出压缩后的文件
});然后在命令行执行：
npm install --save-dev gulp-uglifygulp minify//任务名需要和自己定义的一样，否则会出错执行完后会发现在gulp在gulpTest的根目录下创建了一个build的文件夹同时也将压缩后app.js文件输出到build文件夹中
(3)使用gulp合并压缩多个js文件
继续上面的例子。在js文件夹下新建一个js文件app2.js并在在里面输入代码
function sayWorld(){
console.log("world");
}接下来在gulpfile.js文件中加入一个新的gulp任务名为js
var gulp = require('gulp');
uglify = require('gulp-uglify');//加载压缩插件
jshint = require('gulp-jshint'),//加载js代码验证插件jshint
concat = require('gulp-concat');//加载代码合并插件concat
rename = require('gulp-rename');//加载rename插件
gulp.task('default', function() {
//dosome thing
});
//按js文件原名压缩输出
gulp.task('default', function () {
gulp.src('js/*.js')
.pipe(uglify())
//压缩重命名，例如me.js压缩后变为me.min.js，不需要可注释掉
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('build'))
});
//指定base后按源码原路径输出
gulp.src('src/js/**/*.js', { base: 'src' })
.pipe(minify())
.pipe(gulp.dest('build')); // Writes 'build/js/somedir/somefile.js'
});
gulp.task('minify', function () {
gulp.src('js/app.js')
.pipe(uglify())
.pipe(gulp.dest('build'))
});
gulp.task('js', function () {
return gulp.src('js/*.js')//通配符匹配js文件下的所有js文件
.pipe(jshint())
.pipe(jshint.reporter('default'))//输出js代码验证信息
.pipe(uglify())
.pipe(concat('app.js'))//将代码合并压缩到app.js中文件中
.pipe(gulp.dest('build'));//将压缩合并的app.js输出到build文件夹
});在命令行输入：
安装插件
npm install --save-devgulp js//执行js任务执行成功后会js目录下app.js和app2.js合并压缩到build下的app.js中
三，gulp.src()方法文件匹配实例
(1)匹配具体文件
js/app.js(2)匹配某一文件夹所有文件
js/*.js //匹配js文件夹下所有.js结尾的文件(3)匹配某一文件加下的js文件包括其子目录
js/**/*.js(4)不匹配指定的js文件
!js/app.js //不匹配js文件夹中的app.js文件(5)匹配多种文件
*.+(js|css)(6)gulp.src多条件匹配
gulp.src(['js/**/*.js', '!js/**/*.min.js'])四，gulp任务定义实例
(1)任务中执行其他任务
gulp.task('build', ['css', 'js', 'imgs']);//通过build任务去执行gulp的css,js,imgs任务(2)任务的先后顺序
执行：gulp css时会等待greet任务执行完成再执行css任务
gulp.task('css', ['greet'], function () {
//greet任务完成，干自己想干的事
});五,gulp插件管理优化
前面的第二，三小节中在加载插件时通常在gulpfile.js的文件头部写入以下类似代码
var gulp = require('gulp');
uglify = require('gulp-uglify');//加载压缩插件
jshint = require('gulp-jshint'),//加载js验证插件
concat = require('gulp-concat');//加载代码合并插件在上面代码中实际上jshint被加载了两次，第一次运行时jshint只是给文件对象附加了jshint属性没有输出任何的检查信息而已，但后后面的
jsheet也是必须的，要解决这个问题可以使用一个叫gulp-load-plugins插件，它可以用来加载所有的gulp插件
注意：gulp-load-plugins会去掉被加载插件名的gulp前缀和'-',并且会采用驼峰命名规则对插件重命名，例如：gulp-ray-sass会被重命名为raySass
下面开始体验使用gulp-load-plugins插件来加载gulp插件
(1)修改gulpfile.js,修改后代码如下
var gulp = require('gulp');
gulpLoadPlugins = require('gulp-load-plugins'),//通过gulp-load-plugins加载插件
plugins = gulpLoadPlugins();
gulp.task('default', function() {
//do something
});
gulp.task('minify', function () {
gulp.src('js/app.js')
.pipe(uglify())
.pipe(gulp.dest('build'))
});
gulp.task('js', function () {
return gulp.src('js/*.js')
.pipe(plugins.jshint())
.pipe(plugins.jshint.reporter('default'))
.pipe(plugins.uglify())
.pipe(plugins.concat('app.js'))
.pipe(gulp.dest('build'));
});(2)在项目gulpTest根目录先新建一个package.json的文件，并在文件中输入以下内容
文件里其实就是定义项目依赖的插件，这样gulp-load-plugins就会自动根据package.json去加载所需插件
不知道版本号全使用最新
{
"devDependencies": {
"gulp-concat": "",
"gulp-uglify": "",
"gulp-jshint": "",
"gulp-load-plugins": "",
"jshint":"",
"gulp": ""
}
}
然后运行：
npm install --save-devgulp js同样输出压缩后的js
来源：oschina
链接：https://my.oschina.net/u/1760791/blog/668431