Last active
May 23, 2017 11:55
-
-
Save SigurdMW/29a023ee15ea761b416e9103bc465ee9 to your computer and use it in GitHub Desktop.
A simple and standard setup of Gulp
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// filemane: gulpfile.js | |
// ruby must be installed, then run gem install sass | |
// npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del gulp-babel babel-preset-env --save-dev | |
// also need to get jshint to work: .jshintrc | |
/* | |
UPDATE: without ruby: https://github.com/dlmanning/gulp-sass | |
ex: | |
'use strict'; | |
var gulp = require('gulp'); | |
var sass = require('gulp-sass'); | |
gulp.task('sass', function () { | |
return gulp.src('./sass/**/*.scss') | |
.pipe(sass().on('error', sass.logError)) | |
.pipe(gulp.dest('./css')); | |
}); | |
gulp.task('sass:watch', function () { | |
gulp.watch('./sass/**/*.scss', ['sass']); | |
}); | |
*/ | |
var gulp = require('gulp'), | |
sass = require('gulp-ruby-sass'), | |
autoprefixer = require('gulp-autoprefixer'), | |
cssnano = require('gulp-cssnano'), | |
jshint = require('gulp-jshint'), | |
uglify = require('gulp-uglify'), | |
imagemin = require('gulp-imagemin'), | |
rename = require('gulp-rename'), | |
concat = require('gulp-concat'), | |
notify = require('gulp-notify'), | |
cache = require('gulp-cache'), | |
livereload = require('gulp-livereload'), | |
del = require('del'), | |
babel = require('gulp-babel'), | |
sourcemaps = require('gulp-sourcemaps'), | |
browserify = require('gulp-browserify'); | |
gulp.task('styles', function() { | |
return sass('css/main.scss', { style: 'expanded' }) | |
.pipe(sourcemaps.init()) | |
.pipe(autoprefixer('last 2 version')) | |
.pipe(sourcemaps.write('.')) | |
.pipe(gulp.dest('dist/assets/css')) | |
.pipe(rename({suffix: '.min'})) | |
.pipe(cssnano()) | |
.pipe(gulp.dest('dist/assets/css')) | |
.pipe(notify({ message: 'Styles task complete' })); | |
}); | |
// Scripts | |
gulp.task('scripts', function() { | |
return gulp.src('js//**/*.js') | |
.pipe(sourcemaps.init()) | |
.pipe(babel({ | |
presets: ['env'] | |
})) | |
//.pipe(jshint('.jshintrc')) | |
//.pipe(jshint.reporter('default')) | |
.pipe(browserify()) | |
.pipe(concat('main.js')) | |
.pipe(sourcemaps.write()) | |
.pipe(gulp.dest('dist/scripts')) | |
.pipe(rename({ suffix: '.min' })) | |
.pipe(uglify()) | |
.pipe(gulp.dest('dist/scripts')) | |
.pipe(notify({ message: 'Scripts task complete' })); | |
}); | |
// Images | |
gulp.task('images', function() { | |
return gulp.src('src/images/**/*') | |
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))) | |
.pipe(gulp.dest('dist/images')) | |
.pipe(notify({ message: 'Images task complete' })); | |
}); | |
// clean | |
gulp.task('clean', function() { | |
return del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img']); | |
}); | |
// Default task | |
gulp.task('default', ['clean'], function() { | |
gulp.start('styles', 'scripts', 'images'); | |
}); | |
// Watch | |
gulp.task('watch', function() { | |
// Watch .scss files | |
gulp.watch('css/**/*.scss', ['styles']); | |
// Watch .js files | |
gulp.watch('src/scripts/**/*.js', ['scripts']); | |
// Watch image files | |
gulp.watch('src/images/**/*', ['images']); | |
// Create LiveReload server | |
livereload.listen(); | |
// Watch any files in dist/, reload on change | |
gulp.watch(['dist/**']).on('change', livereload.changed); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment