AngularJS + Gulp文件和文件夹结构和正确的gulfull .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中要求它，并使用这些变量来提供一个更清晰的代码。应该是这样的:

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));
});