用户登录

🎉 8 周年订阅优惠

使用 gulp-concat 这个插件,我们可以把几个文件合并到一块儿。先去安装一下这个插件 ... 打开命令行工具 ... 输入 sudo npm install gulp-concat --save-dev ...

完成以后再回到我们的项目 ... 在 javascripts 这个目录的下面,有两个 js 文件, jquery.js 还有 modernizr.js ... 我们可以使用 gulp-concat 这个插件,把这两个 js 文件合并到一块儿,然后放到 dist 目录下面的 js 这个目录的里面。

打开 gulpfile.js ... 先在文件的顶部,把 gulp-concat 这个插件包含进来 ...

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

然后再创建一个任务 ... 用 gulp 的 task 方法 ... 任务的名字可以叫它 scripts .. 再用一个匿名函数去设计一下这个任务要干的事儿 ... 先用 gulp 的 src 方法,去读取要处理的文件 ... 这里我们找出 javasciprts 目录下面的两个 js 文件 ...

先给这个方法一个数组 ... 然后提定一下 jquery 的位置 .. 逗号分隔一下 ... 再找到 modernizr 的位置 ... 再用一个 .pipe 管道 ... 在这个管道里面,可以使用 concat 去把读取过来的文件合并到一块儿 ... 在这个 concat 里面,可以指定一下合并以后,这个文件的名字 ... 我们叫它 vendor.js ..

接着再用一个 .pipe 去把合并好的文件放到一个指定的位置上 ... 用 gulp 的 dest ... 放在 dist 目录下面的 js 这个目录里面。

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

保存 ... 找到命令行工具,去执行一下这个任务 ... 输入 gulp scripts ... 完成以后,再回到项目 .. 打开 dist .. js 这个目录,这个目录下面的 vendor.js 就是合并好的文件 ...

https://www.npmjs.org/package/gulp-concat

合并文件:gulp-concat《 Gulp 自动化任务 》

统计

11393
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点