如何在gulp中的一个函数内拼接多个js文件

Question

我需要使用Gulp将其相应函数内的所有特定文件连接起来，文件夹结构如下：

。

modules
  - header
    - document.ready.js
    - functions.js
    - window.resize.js
  - main
    - document.ready.js
    - functions.js
    - window.resize.js
  - footer
    - document.ready.js
    - functions.js
    - window.resize.js

最终文件应该是这个样子：

//All functions.js files concated.

$(document).ready(function(){
    //All document.ready.js files concated.
});

$(window).resize(function(){
    //All window.resize.js files concated.
});

有人知道如何使用Gulp完成这个任务吗？

我目前的做法是：

gulp.task('modules', function() {
    gulp.src('js/modules/**/document.ready.js')
        .pipe(concat('document.ready.js'));

    var source = gulp.src('generator/assets/js/document.ready.js', {read: false});
    var target = gulp.src('js/modules/modules.js');

    target.pipe(inject(source), {starttag: '<!-- inject:head:js -->'})
        .pipe(gulp.dest('generator/assets/js'));
});

目标文件的内容如下：

$(document).ready(function(){
    <!-- inject:head:js -->
    <!-- endinject -->
});

当我运行gulp时，文件仅仅被复制，注入并未发生。有任何想法是哪里出了问题吗？

- Caio Kawasaki

---

你目前尝试了什么？ - Lowkase

@Lowkase 我不知道从哪里开始，我对 Gulp 不是很熟悉... - Caio Kawasaki

我不会替你完成所有的工作，但这应该能指引你正确的方向：https://www.npmjs.com/package/gulp-concat。通过命令行进入你的目录并输入“npm install gulp-concat”来从网上安装它。 - Katana314

@Katana314 我的问题是将所有连接的文件插入到最终文件中... - Caio Kawasaki

使用gulp-inject插件进行插入。 - harishr

@Katana314 现在怎么办？这里有些问题... - Caio Kawasaki

Answer 1

我用以下代码解决了我的问题：

var gfi = require("gulp-file-insert");

gulp.task('modules', function() {
    gulp.src('js/modules/**/document.ready.js')
        .pipe(concat('document.ready.js'))
        .pipe(gulp.dest('generator/assets/js'));

    gulp.src('js/modules/modules.js')
        .pipe(gfi({
            "/* file 1 */": "generator/assets/js/document.ready.js"
        }))
        .pipe(gulp.dest('generator/assets/js'));
});

你可以使用gulp-file-insert来替换文件内容。

- Caio Kawasaki