【二】gulp之用gulp-concat合并js文件

还记得上一篇我说的那个js文件合并的例子吗？这一篇我们就来做这个

• 1） 目录结构

Paste_Image.png

• 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） 运行任务

Paste_Image.png

• 5） 运行结果

Paste_Image.png

能否将类库文件和普通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任务）

Paste_Image.png

运行结果

Paste_Image.png

OK ！ 文件已生成，接下来引用文件，不用我再废话了吧~~~

<script src="js/vendor.js"></script>
<script src="js/index.js"></script>

注：本系列文章只做简单入门，深入了解请自行修行。