SASS Watch

gulpfile.js

/*
  Gulpfile de exemplo para algumas ações clássicas de otimização.
 */

const gulp = require('gulp');
const RevAll = require('gulp-rev-all');
const gulpsync = require('gulp-sync')(gulp);
const $ = require('gulp-load-plugins')({ rename: { 
  'gulp-rev-delete-original': 'revdel', 
  'gulp-if': 'if', 
  'gulp-twig' : 'twig', 
  'gulp-sass' : 'sass',
  'gulp-clean-css' : 'cleanCSS',
  'gulp-rev-css-url' : 'overrideCSS'
}});

/* Tasks base */
gulp.task('copy', () => {
  return gulp.src(['site/assets/{img,fonts}/**/*', 'site/app.yaml', 'site/src/**/*', 'site/vendor/**/*'], { base: 'site' })
    .pipe(gulp.dest('dist'));
});

gulp.task('clean', () => {
  return gulp.src('dist/', { read: false })
    .pipe($.clean());
});

/* SASS - SCSS */
gulp.task('sass', () => {
  return gulp.src(['site/assets/sass/**/*.sass', 'site/assets/sass/**/*.scss'])
   .pipe($.sass())
   .pipe(gulp.dest('site/assets/css'));
});

// gulp.task('copy-sass-final', () => {
//   return gulp.src(['dist/assets/css/**/*.css'], { base: 'dist' })
//     .pipe(gulp.dest('site'));
// });

/* watch */
gulp.task('sass:watch', () => {
  return gulp.watch(['site/assets/sass/**/*.sass', 'site/assets/sass/**/*.scss'], gulpsync.sync(['sass']));
});

/* Minificação */
gulp.task('minify-js', () => {
  return gulp.src('site/**/*.js')
    .pipe($.uglify())
    .pipe(gulp.dest('dist/'))
});

gulp.task('minify-css', () => {
  return gulp.src('site/**/*.css')
    .pipe($.cleanCSS())
    //.pipe($.cssnano({ safe: true }))
    .pipe(gulp.dest('dist/'))
});

gulp.task('minify-html', () => {
  return gulp.src('site/**/*.html')
    .pipe($.htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist/'))
});

gulp.task('comp-twig', function () {
  return gulp.src('site/**/*.html')
    .pipe($.twig({
      data: {
        title: 'Gulp and Twig',
        benefits: [
          'Fast',
          'Flexible',
          'Secure'
        ]
      }
    }))
    .pipe(gulp.dest('dist/'));
});

/* Concatenação */
gulp.task('useref', () => {
  return gulp.src('site/views/index.html')
    .pipe($.useref())
    .pipe($.if('*.html', $.inlineSource()))
    .pipe($.if('*.html', $.htmlmin({ collapseWhitespace: true })))
    .pipe($.if('*.js', $.uglify()))
    .pipe($.if('*.css', $.cssnano({ safe: true })))
    .pipe(gulp.dest('dist/views/'));
});

/* Imagens */
gulp.task('imagemin', () => {
  return gulp.src('site/assets/img/*')
    .pipe($.imagemin({
      progressive: true,
      svgoPlugins: [
        { removeViewBox: false },
        { cleanupIDs: false }
      ]
    }))
    .pipe(gulp.dest('dist/assets/img'));
});

/* Revisão de arquivos */
gulp.task('rev', () => {
  return gulp.src(['dist/**/*.{css,js,jpg,jpeg,png,svg}'])
    .pipe($.rev())
    .pipe($.revdel())
    .pipe($.overrideCSS())
    .pipe(gulp.dest('dist/'))
    .pipe($.rev.manifest())
    .pipe(gulp.dest('dist/'))
});

gulp.task('rev-other', () => {
  return gulp.src(['dist/**/*.{css,js,jpg,jpeg,png,svg,html}'])
    .pipe(RevAll.revision({
      includeFilesInManifest: ['.html', '.yaml', '.js', '.css'],
      dontRenameFile: ['.*/.*\.html']
    }))
    .pipe($.revdel())
    .pipe(gulp.dest('dist/'))
});

gulp.task('revreplace', ['rev'], () => {
  return gulp.src(['dist/**/*.html', 'dist/app.yaml', 'dist/**/*.css'])
    .pipe($.revReplace({
      manifest: gulp.src('dist/rev-manifest.json'),
      replaceInExtensions: ['.html', '.yaml', '.js', '.css']
    }))
    .pipe(gulp.dest('dist/'));
});

/* Alias */
gulp.task('min-sass', $.sequence('sass'));
gulp.task('minify', $.sequence('min-sass', ['minify-js' , 'minify-css', 'minify-html']));
gulp.task('build', $.sequence(['minify', 'imagemin'], 'useref', 'rev-other'));
gulp.task('default', $.sequence('clean', 'copy', 'build'));

package.json

{
  "name": "site-thcm",
  "version": "0.0.1",
  "author": "Maurício R Duarte",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-clean-css": "^3.3.1",
    "gulp-cssnano": "^2.1.1",
    "gulp-htmlmin": "^1.3.0",
    "gulp-if": "^2.0.0",
    "gulp-imagemin": "^2.4.0",
    "gulp-inline-source": "^2.1.0",
    "gulp-load-plugins": "^1.2.0",
    "gulp-rev": "^7.0.0",
    "gulp-rev-all": "^0.9.7",
    "gulp-rev-css-url": "^0.1.0",
    "gulp-rev-delete-original": "^0.1.0",
    "gulp-rev-replace": "^0.4.3",
    "gulp-sass": "^3.1.0",
    "gulp-sequence": "^0.4.5",
    "gulp-sync": "^0.1.4",
    "gulp-twig": "^0.7.0",
    "gulp-uglify": "^1.5.3",
    "gulp-useref": "^3.0.8"
  }
}