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

Question

I want to create a three page app, i need follow structure:

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

How should i create a tasks for scripts (scripts in different folders) in gulpfile.js?

Maybe my structure is wrong, then how could it to look like?

Answer 1

Your structure seems right. You can use any architecture you want for your project. Regarding Gulp, you just have to know how to filter the javascript source files when you call gulp.src() . It should be something like this:

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

A quick recommendation would be to create a gulp.config.js file to handle all the string variables, filters, directories, among others. Then require it in your gulpfile.js and use those variables to provide a cleaner code. It should be something around this:

gulp.config.js (located in the same folder of the 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));
});

This should work for you.