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

还记得上一篇我说的那个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'));
});

说明

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>

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