还记得上一篇我说的那个js文件合并的例子吗？这一篇我们就来做这个
- 1） 目录结构
- 2）安装合并所需插件
gulp做文件合并，需要借助一个插件
gulp-concat
npm install gulp-concat
- 3）新建gulpfile.js 写入以下代码
合并所有js为一个文件
//调用gulp模块
var gulp = require('gulp')
//调用js文件合并插件
var concat = require('gulp-concat');
//用gulp建立一个all_to_one任务
gulp.task('all_to_one', function() {
return gulp.src('scripts/**/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('js'));
});
说明
A. gulp.src()的作用是找到需要处理的文件（这里我们需要处理的是
scripts目录中所有的js文件）
参数格式为：gulp.src(globs[, options])
globs:类型： String 或 Array 所要读取的 glob 或者包含 globs 的数组。
glob 请参考 node-glob 语法 或者，你也可以直接写文件的路径。
options：额外的选项参数，相关解释请参见：options文档B. pipe() 理解为管道，想象gulp处理文件为一个水管，gulp.src()负责进需要过滤的水（进水口），pipe()负责处理进入的水（例如：过滤杂质插件，过滤有害物质...等插件）；参数就是要对水执行的操作，例子中传入了插件
gulp-concat暴露的concat方法，方法参数为最后处理之后的文件名（all.js）;
详细用法见：gulp-concat文档C.gulp.dest()的作用是将管道中处理过的文件流重新输出到某位置（路径下）；
参数格式：gulp.dest(path[, options])
path 类型： String or Function
文件将被写入的路径（输出目录）。也可以传入一个函数，在函数中返回相应路径，这个函数也可以由 vinyl 文件实例 来提供。
options 类型： Object
options.cwd
类型： String 默认值： process.cwd()
输出目录的 cwd 参数，只在所给的输出目录是相对路径时候有效。
options.mode
类型： String 默认值： 0777
八进制权限字符，用以定义所有在输出目录中所创建的目录的权限。
- D.gulp.dest() 可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它；
gulp.src('./client/templates/*.jade')
.pipe(jade())
.pipe(gulp.dest('./build/templates'))
.pipe(minify())
.pipe(gulp.dest('./build/minified_templates'));
- 4） 运行任务
- 5） 运行结果
能否将类库文件和普通js文件分别合并？
代码
//调用gulp模块
var gulp = require('gulp')
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
//用gulp建立一个javascript任务 依赖 lib 任务
gulp.task('javascript',['lib'], function() {
return gulp.src(['scripts/**/*.js','!scripts/lib/*.js'])
.pipe(concat('index.js'))
.pipe(gulp.dest('js'));
});
//用gulp建立一个合并类库文件的任务
gulp.task('lib', function() {
return gulp.src('scripts/lib/*.js')
.pipe(concat('vendor.js'))
.pipe(gulp.dest('js'));
});
运行任务（javascript 任务依赖 lib 任务 所以 lib 任务会先执行，然后再执行 javascript任务）
运行结果
OK ！ 文件已生成，接下来引用文件，不用我再废话了吧~~~
<script src="js/vendor.js"></script>
<script src="js/index.js"></script>
注：本系列文章只做简单入门，深入了解请自行修行。
