Common Gulp Tasks

17 October 2016

I’ve been using Gulp for a couple of years now. I originally had huge set of tasks available so that I’d be ready for any problem, but it became a dependency nightmare, especially when working with Windows (try deleting the node_modules folder!) I’m back now with a fairly simple set of tasks that cover the essentials. I’d highly recommend Browser-sync for local server and live-reload features.

Here’s the gulpfile that I’m using at the moment:

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('serve', function() {
        proxy: "http://localhost.xxxx",
        notify: false

gulp.task('watch', function () {'./css/**/*.scss', ['sass']);'./css/*.css', ['autoprefixer']);'*.php').on('change', browserSync.reload);

gulp.task('sass', function () {
    return gulp.src('./css/**/*.scss')
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))

var autoprefixerOptions = {
    browsers: ['last 2 versions', '> 5%']

gulp.task('autoprefixer', function() {
    return gulp.src('./css/*.css')

var defaultTasks = ['sass', 'autoprefixer', 'serve', 'watch'];

gulp.task('default', defaultTasks);

And package.json to go along with it:

    "devDependencies": {
        "gulp": "latest",
        "gulp-sass": "latest",
        "browser-sync": "latest",
        "gulp-cssmin": "latest",
        "gulp-rename": "latest",
        "gulp-sourcemaps": "latest",
        "gulp-autoprefixer": "latest"