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?
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.
