文件合并

写完js之后，想把他们合并为一个文件。

gulp-concat

文档：https://www.npmjs.com/package/gulp-concat

这个插件的作用是将多个js文件合并为一个js文件。

npm install --save-dev gulp-concat

用法

concat([string],[object])

var concat = require('gulp-concat');

gulp.task('scripts', function() {
  return gulp.src('./lib/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'));
});

参数

string

如果它的第一个参数是string类型，那么直接把这个string作为合并生成的文件名。

object

{
    cwd: '', // 相对位置
    newLine: ';', // 换行的时候添加
    path: 'xxx.js', // 输出文件
    stat: {
        mode: 0666 // 文件的权限
    }
}

举个例子：

var concat = require('gulp-concat');

gulp.task('scripts', function() {
  return gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])
    .pipe(concat({ path: 'new.js', stat: { mode: 0666 }}))
    .pipe(gulp.dest('./dist'));
});

gulp-sourcemaps

这是一个生成Source maps的插件，当我们把多个文件合并为一个文件的时候，应该提供.map，这样浏览器可以找到原始的文件，有利于后期调试。

var gulp = require('gulp');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('javascript', function() {
  return gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
      .pipe(concat('all.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});