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

这应该适合你。

AngularJS + Gulp文件和文件夹结构和权限gulpfule.js config

1 个答案: