Skip to main content

One Reason To Still Use Gulp

I believe that every tool has its particular use. There are fashions, styles, trends, bias (especially with developers), etc, but you have to have the right tool for the job. Let me get this straight - I usually only use npm scripts. However, I have been given a repo with just front end sass and js code. No dev environment, nothing. What a nightmare. To get started quickly I wrapped that repo in my own new dev environment, installed gulp, and knocked up a gulp file in less than an hour. One reason to use a tool is a) will it work, b) can it be used now. Yes and yes.

const gulp = require('gulp');
const livereload = require('gulp-livereload');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const cleanCSS = require('gulp-clean-css');
const sequence = require('run-sequence');
const concatCss = require('gulp-concat-css');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify-es').default;

gulp.task('dev', ['css', 'js'], () => {
  livereload.listen(1234);
});

gulp.task('css', (done) => {
  return sequence('sass', 'minimise-css', done);
});

gulp.task('sass', () => {
  return gulp.src('./website/_styles/_home/*.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(gulp.dest('./website/_styles/_home'));
});

gulp.task('minimise-css', () => {
  return gulp.src(['./website/_styles/_home/compromised-tech.css'])
    .pipe(cleanCSS())
    .pipe(concatCss('compromised-tech-min.css'))
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./website/_styles/_home'));
});

gulp.task('js', () => {
  return gulp.src('./website/_scripts/_home/compromised-tech.js')
    .pipe(concat('compromised-tech-min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./website/_scripts/_home'));
});

gulp.task('watch', () => {
  gulp.watch('website/_styles/**', ['css']);
  gulp.watch('website/_scripts/**', ['js']);
});

gulp.task('default', ['dev'], () => {
  gulp.start('watch');
});