1
\$\begingroup\$

Here's a simple gulpfile.js I'm using on a very simple project which basically consists of an animation built with Sass, SVG and very little JS.

var gulp = require('gulp'),
    usemin = require('gulp-usemin'),
    rimraf = require('gulp-rimraf'),
    sass = require('gulp-sass'),
    prefix = require('gulp-autoprefixer'),
    minifyCSS = require('gulp-minify-css'),
    // minifyHTML = require('gulp-minify-html'), // messes up the SVG
    uglify = require('gulp-uglify'),
    watch = require('gulp-watch'),
    livereload = require('gulp-livereload');

gulp.task('rimraf', function() {
  return gulp.src('./dist', { read: false })
    .pipe(rimraf());
});

gulp.task('sass', function() {
    return gulp.src('app/sass/**/*.scss')
        .pipe(sass())
        .pipe(prefix('> 1%')) // this could be on usemin (to also prefix css files from index.html), but doesn't seem to work
        .pipe(gulp.dest('./app/css'));
});

gulp.task('usemin', function() {
  gulp.src('./app/index.html')
    .pipe(usemin({
        css: [
            // prefix('> 1%') // doesnt work
            minifyCSS()
        ],
        html: [
            // minifyHTML()
        ],
        js: [
            uglify()
        ]
    }))
    .pipe(gulp.dest('./dist'));
});

// For production
gulp.task('default', ['rimraf', 'sass'], function(){
    gulp.start('usemin');
});


// Watch SASS and keep CSS updated and auto-prefixed (for development)
gulp.task('watch-sass', function () {
    gulp.src('app/sass/**/*.scss')
        .pipe(watch(function(files) {
            return files.pipe(sass())
                .pipe(prefix('> 1%'))
                .pipe(gulp.dest('./app/css'))
                .pipe(livereload())
        }));
});

I'm not a back-end person and gulp is brand new to me, so I'd like to have some feedback on it. In addition, I had some problems regarding the autoprefixer, which you can see in the comments.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.