Good questions 
It’s not too complex for Gulp but yes I think there will be less custom code required with Webpack.
With Gulp you’ll need separate tasks for each asset type, and separate tasks for compiling locally as well as production, here’s an example of a gulpfile.js that I’ve used. You’re not using the same tools but the idea is the same.
var gulp = require('gulp');
var gutil = require('gulp-util');
var sass = require('gulp-sass');
var coffee = require('gulp-coffee');
var uglifyJS = require('gulp-uglify');
var minifyCSS = require('gulp-minify-css');
var autoprefix = require('gulp-autoprefixer');
var template = require('gulp-template-compile');
var include = require('gulp-include');
var rename = require('gulp-rename');
var paths = {
coffee: {
src: 'assets/scripts/**/*.coffee',
dest: 'static/v3/javascripts'
},
js: {
src: 'assets/scripts/**/*.js',
dest: 'static/v3/javascripts'
},
styles: {
src: 'assets/scss/**/*.scss',
dest: 'static/v3/stylesheets'
},
templates: {
src: 'assets/templates/**/*.html',
dest: 'static/v3/templates'
}
};
gulp.task('coffee', function() {
return gulp.src(paths.coffee.src)
.pipe(include())
.pipe(coffee())
.on('error', gutil.log)
.on('error', gutil.beep)
.pipe(gulp.dest(paths.coffee.dest));
});
gulp.task('js', function() {
return gulp.src(paths.js.src)
.pipe(include())
.pipe(gulp.dest(paths.js.dest));
});
gulp.task('coffee_compile', function() {
return gulp.src(paths.coffee.src)
.pipe(include())
.pipe(coffee())
.pipe(uglifyJS())
.pipe(gulp.dest(paths.coffee.dest));
});
gulp.task('js_compile', function() {
return gulp.src(paths.js.src)
.pipe(include())
.pipe(uglifyJS())
.pipe(gulp.dest(paths.js.dest));
});
gulp.task('templates', function() {
return gulp.src(paths.templates.src)
.pipe(template({
name: function(file) {
return file.relative.replace('.html', '');
},
templateSettings: {
variable: 'data'
}
}))
.pipe(gulp.dest(paths.templates.dest));
});
gulp.task('templates_compile', function() {
return gulp.src(paths.templates.src)
.pipe(template({
name: function(file) {
return file.relative.replace('.html', '');
},
templateSettings: {
variable: 'data'
}
}))
.pipe(uglifyJS())
.pipe(gulp.dest(paths.templates.dest));
});
gulp.task('styles', function() {
return gulp.src(paths.styles.src)
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefix(['last 2 versions', "ie 8"]))
.pipe(gulp.dest(paths.styles.dest));
});
gulp.task('styles_compile', function() {
return gulp.src(paths.styles.src)
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefix(['last 2 versions', "ie 8"]))
.pipe(minifyCSS())
.pipe(gulp.dest(paths.styles.dest));
});
gulp.task('watch', function() {
gulp.watch(paths.coffee.src, ['coffee']);
gulp.watch(paths.js.src, ['js']);
gulp.watch(paths.styles.src, ['styles']);
gulp.watch(paths.templates.src, ['templates']);
});
gulp.task('scripts', ['coffee', 'js'])
gulp.task('scripts_compile', ['js_compile', 'coffee_compile'])
gulp.task('default', ['styles', 'scripts', 'templates', 'watch']);
gulp.task('compile', ['styles_compile', 'scripts_compile', 'templates_compile']);
Less has it’s own @import for requiring other files.
For JS to do that you’ll need a module bundler like Browserify or Webpack.
It may be easiest to keep bootstrap as separate includes in your html, and then you can bundle up all of your js and css into single files.
Here’s what I would be aiming to compile it down to.
- build/js/app.js
- build/css/app.css
- vendor/bootstrap/…
