Skip to content

Instantly share code, notes, and snippets.

@tieppt
Created February 6, 2017 08:19
Show Gist options
  • Save tieppt/6501c01adc9e7c8a299e928726aaff87 to your computer and use it in GitHub Desktop.
Save tieppt/6501c01adc9e7c8a299e928726aaff87 to your computer and use it in GitHub Desktop.
gulpfile.js configuration for scss project
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var autoprefix = require('gulp-autoprefixer');
var del = require('del');
var sourcemaps = require('gulp-sourcemaps');
var flatten = require('gulp-flatten');
var gutil = require('gulp-util');
var FILES = {
'src': 'src',
'js': 'src/js',
'scss': 'src/scss',
'fonts': 'src/fonts',
'img': 'src/img',
'dest': 'public',
'destCss': 'public/css',
'destFonts': 'public/fonts',
'destJs': 'public/js',
'destImg': 'public/img',
};
var imgFiles = FILES.img + '/**/*.{png,jpg,jpeg,svg,ico}';
gulp.task('clean-css', function() {
return del([FILES.destCss], {'force': true});
});
gulp.task('clean-js', function() {
return del([FILES.destJs], {'force': true});
});
gulp.task('clean-fonts', function() {
return del([FILES.destFonts], {'force': true});
});
gulp.task('clean-img', function() {
return del([FILES.destImg], {'force': true});
});
gulp.task('copyfonts', ['clean-fonts'], function() {
gulp.src(FILES.fonts + '/**/*.{ttf,otf,woff,woff2,eot,svg}')
.pipe(gulp.dest(FILES.destFonts));
});
gulp.task('copyimg', ['clean-img'], function() {
gulp.src(imgFiles)
.pipe(gulp.dest(FILES.destImg));
});
gulp.task('scss', ['clean-css'], function() {
var scssSources = FILES.scss + '/*.scss';
gulp.src(scssSources)
// .pipe(sourcemaps.init()) // use for development
.pipe(sass({outputStyle: 'expanded'}).on('error', gutil.log))
.pipe(autoprefix({
'browsers': ['last 2 version', 'ie 9'],
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(FILES.destCss));
});
gulp.task('js', ['clean-js'], function() {
gutil.log(gutil.colors.magenta('Start Javascript task'));
var jsSources = FILES.js + '/**/*.js';
gulp.src(jsSources)
.pipe(watch(jsSources))
.pipe(flatten())
.pipe(gulp.dest(FILES.destJs))
.on('end', function() { gutil.log('Done Javascript task!'); });
});
gulp.task('default', ['scss', 'copyfonts', 'copyimg', 'js'], function() {
var scssWatchSources = FILES.scss + '/**/*.scss';
gulp.watch(scssWatchSources, ['scss']);
gulp.watch(imgFiles, ['copyimg']);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment