还记得上一篇我说的那个 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>
注: 本系列文章只做简单入门, 深入了解请自行修行
来源: http://www.jianshu.com/p/63dad14687fb