javascript - AngularJS + Gulp 文件和文件夹结构以及正确的 gulpfule.js 配置

Question

我想创建一个三页应用程序，我需要以下结构:

frontend
-app
--page1
---page1.js
---page1.html
--page2
---page2.js
---page2.html
--page3
---page3.js
---page3.html
-assets
--style
---main.scss
--js
---main.js
--images
-index.html

public (for production version)

gulpfile.js
package.json

我应该如何在 gulpfile.js 中为脚本(不同文件夹中的脚本)创建任务？

也许我的结构是错误的，那它会是什么样子？

Answer 1

你的结构看起来是正确的。您可以为您的项目使用任何您想要的架构。对于Gulp，你只需要知道在调用gulp.src()时如何过滤javascript源文件即可。应该是这样的:

gulp.task('scripts', function() {
    return gulp.src('./app/**/*.js')
        .pipe() //Do whatever process you need here
        .
        .
        .pipe(gulp.dest('./assets/js/'));
});

一个快速建议是创建一个 gulp.config.js 文件来处理所有字符串变量、过滤器、目录等。然后在 gulpfile.js 中 require 它并使用这些变量来提供更清晰的代码。应该是这样的:

gulp.config.js(位于 gulpfile.js 的同一文件夹中)

module.exports = function() {
    var src = './app/';
    var dest = './assets/';

    var config = {
        js: {
            src: src + '**/*.js',
            dest: dest + 'js/'
        }
    };

    return config;
}

gulpfile.js

var config = require('./gulp.config.js')();

.
.
.

gulp.task('scripts', function() {
    return gulp.src(config.js.src)
        .pipe() //Do whatever process you need here
        .
        .
        .pipe(gulp.dest(config.js.dest));
});

这应该适合你。