GULP - How to use gulp in production /deployment? - gulp

Question

I have not much experience with gulp and wonder what to do when deploying? How do I exclude certain tasks (like my 'sass' task for example) when deploying or how does gulp work for production - what would I do? I'm not sure if I use the wrong words or just don't understand it, but I couldn't find much online so far.
My gulp file:
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
// Compiles SCSS files from /scss into /css
gulp.task('sass', function() {
return gulp.src('scss/main.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
});
// Minify compiled CSS
gulp.task('minify-css', ['sass'], function() {
return gulp.src('css/main.css')
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
});
// Minify custom JS
gulp.task('minify-js', function() {
return gulp.src('js/scripts.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
});
// Copy vendor files from /node_modules into /vendor
// NOTE: requires `npm install` before running!
gulp.task('copy', function() {
gulp.src([
'node_modules/bootstrap/dist/**/*',
'!**/npm.js',
'!**/bootstrap-theme.*',
'!**/*.map'
])
.pipe(gulp.dest('vendor/bootstrap'))
gulp.src(['node_modules/jquery/dist/jquery.js',
'node_modules/jquery/dist/jquery.min.js'])
.pipe(gulp.dest('vendor/jquery'))
gulp.src(['node_modules/jquery-easing/*.js'])
.pipe(gulp.dest('vendor/jquery-easing'))
})
// Default task
gulp.task('default', ['sass', 'minify-css', 'minify-js', 'copy']);
// Configure the browserSync task
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: ''
},
})
})
// Dev task with browserSync
gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js'], function() {
gulp.watch('scss/*.scss', ['sass']);
gulp.watch('css/*.css', ['minify-css']);
gulp.watch('js/*.js', ['minify-js']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/**/*.js', browserSync.reload);
});

Answer 1

It depends entirely on your hosting solution and what deployment process you prefer to use. Some of your former questions have the Heroku tag so I assume you use Heroku. If not you can use the second strategy.
One method of using Gulp with Heroku is to automatically run Gulp when you push to the Heroku branch. This is done by having a postinstall script in package.json. Like so:
"scripts": {
..
"postinstall": "gulp"
}
When you push to the remote branch, Heroku will run the build process as normal. After the build process is done it will run the postinstall script. That will run the default task in the gulpfile. This will, of course, run on your Heroku dyno, not on localhost.
If you want to change the different sub tasks that are run during postinstall you can make a new task like this:
gulp.task('deployment', ['minify-css', 'minify-js', 'copy']);
and change the postinstall script to this:
"postinstall": "gulp deployment"
The deployment task will now run instead of the default task.
For this to work you need all the gulp packages in dependencies rather than devDependencies. devDependencies are, after all, not installed on Heroku.
The files that Gulp builds should be added to the .gitignore file. The files that Gulp outputs are often sent to a folder called dist which is kept out of the repository completely. You don't need to have them in the repository as they are being built on Heroku instead.
Another method is to build the files manually yourself before deployment. That means you don't have gulp in the postinstall script (or don't have the postinstall script at all) and keep the gulp packages in devDependencies. The files that are being built should also not be in .gitignore.
Before you deploy you build the files with gulp deployment and then commit them. When you push to Heroku the files will be uploaded like normal, instead of being built there.
This strategy is usually used when you have an ordinary web hosting service.