I followed the Gulp integration from the second book which is awesome, but I can’t seem to figure out or even find an answer for having multiple tasks with multiple destinations. I have my frontend styles separated from my admin dashboard styles and would like to have Gulp watch and both directories independently.
Anyone have any experience with this and could provide some guidance? Thank you.
Oh interesting. I am not sure but I will tweet this out tomorrow and see if any of my Twitter followers can help!
I figured it out…I really couldn’t find any information on it, so I just hacked around until the obvious slapped me in the face. I am sure there’s a way to reduce the code a little, but I am perfectly happy with it this way. I am picking up a lot of jobs these days so creating a starter app with bells and whistles built in will save a lot of time especially Gulp :)
If you look at the code below, all I ended up doing is doubling up on all the tasks; one set for the frontend and one for the backoffice(admin) and simple named the functions accordingly. Hope this helps someone. Thank you.
// Include Gulp
var gulp = require('gulp');
// Include Our Plugins
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var autoprefixer = require('autoprefixer');
var postcss = require('gulp-postcss');
//// Frontend Tasks
gulp.task('fo_sass', function () {
return gulp.src('starter_app/static/frontend/scss/style.scss')
.pipe(sass())
.pipe(gulp.dest('starter_app/static/frontend/css'));
});
// Concatenate
gulp.task('fo_scripts', function () {
return gulp.src('starter_app/static/frontend/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('starter_app/static/frontend/js'));
});
// PostCSS processor
gulp.task('fo_css', function () {
var processors = [
autoprefixer({browsers: ['last 1 version']})
];
return gulp.src('starter_app/static/frontend/css/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('starter_app/static/frontend/css'))
});
//// Backoffice Tasks
// Compile Our Sass
gulp.task('bo_sass', function () {
return gulp.src('starter_app/static/backoffice/scss/style.scss')
.pipe(sass())
.pipe(gulp.dest('starter_app/static/backoffice/css'));
});
// Concatenate
gulp.task('bo_scripts', function () {
return gulp.src('starter_app/static/backoffice/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('starter_app/static/backoffice/js'));
});
// PostCSS processor
gulp.task('bo_css', function () {
var processors = [
autoprefixer({browsers: ['last 1 version']})
];
return gulp.src('starter_app/static/backoffice/css/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('starter_app/static/backoffice/css'))
});
// Watch Files For Changes
gulp.task('watch', function () {
gulp.watch('starter_app/static/frontend/scss/style.scss', ['fo_sass']);
gulp.watch('starter_app/static/frontend/js/*.js', ['fo_scripts']);
gulp.watch('starter_app/static/frontend/css/*.css', ['fo_css']);
gulp.watch('starter_app/static/backoffice/scss/style.scss', ['bo_sass']);
gulp.watch('starter_app/static/backoffice/js/*.js', ['bo_scripts']);
gulp.watch('starter_app/static/backoffice/css/*.css', ['bo_css']);
});
// Default Task
gulp.task('default', ['bo_sass', 'bo_scripts', 'bo_css','fo_sass', 'fo_scripts', 'fo_css', 'watch']);@limedaring Tracy, actually can you still send out a tweet to see if their is a proven way to control the order in which the js files are concatenated? I tried gulp-order and even though I listed them in order as seen below, they are still out of order. I am going to place this question on stack overflow and if I get a response I will post solution here so others can benefit. Thank you.
Here’s the solution to controlling the order of your scripts…add each script as a source :)
gulp.task('bo_scripts', function () {
gulp.src([
'excanvas.min.js',
'respond.min.js',
'js.cookie.min.js',
'bootstrap-hover-dropdown.min.js',
'jquery.slimscroll.min.js',
'jquery.blockui.min.js',
'jquery.uniform.min.js',
'bootstrap-switch.min.js',
'app.min.js',
'dashboard.min.js',
'layout.min.js',
'quick-sidebar.min.js'
], {
cwd: 'starter_app/static/backoffice/js/vendor'
})
.pipe(concat('scripts.js'))
.pipe(gulp.dest('starter_app/static/backoffice/js'));
});