Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Gulp setup
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var modernizr = require('gulp-modernizr');
var browserSync = require('browser-sync');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var pump = require('pump');
var gulpIf = require('gulp-if');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');
var cheerio = require("gulp-cheerio");
var svgstore = require('gulp-svgstore');
var svgmin = require('gulp-svgmin');
var path = require('path');
// Development Tasks
// -----------------
// Start browserSync server
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'app'
}
})
})
gulp.task('sass', function() {
return gulp.src('assets/styles/**/*.scss') // Gets all files ending with .scss in app/styles and children dirs
.pipe(sass()) // Passes it through a gulp-sass
.pipe(gulp.dest('dist/css')) // Outputs it in the css folder
.pipe(browserSync.reload({ // Reloading with Browser Sync
stream: true
}));
})
gulp.task('modernizr', function() {
gulp.src('assets/scripts/**/*.js')
.pipe(modernizr())
.pipe(uglify())
.pipe(gulp.dest("assets/vendor/modernizr"))
});
// Watchers
gulp.task('watch', function() {
gulp.watch('assets/styles/**/*.scss', ['sass']);
gulp.watch('assets/*.html', browserSync.reload);
gulp.watch('assets/scripts/**/*.js', ['compress'], browserSync.reload);
gulp.watch('assets/icons/*.svg', ['svgstore'], browserSync.reload);
})
// Optimization Tasks
// ------------------
// Optimizing Images
gulp.task('images', function() {
return gulp.src('assets/images/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true,
})))
.pipe(gulp.dest('dist/images'))
});
//SVGS
gulp.task("svgstore", function () {
return gulp.src("assets/icons/*.svg")
.pipe(svgmin())
.pipe(svgstore({
inlineSvg: true,
// fileName: "sprite.svg",
prefix: "icon-"
}))
.pipe(cheerio({
run: function ($) {
$("[fill]").removeAttr("fill");
},
parserOptions: { xmlMode: true }
}))
.pipe(gulp.dest("partials/svg-blocks"));
});
// Copying fonts
gulp.task('fonts', function() {
return gulp.src('assets/fonts/**/*')
.pipe(gulp.dest('dist/fonts'))
})
// Scripts
gulp.task('compress', function (cb) {
pump([
// gulp.src('assets/scripts/**/*.js'),
gulp.src(['assets/scripts/vendor/foundation.min.js', 'assets/scripts/vendor/sharer.min.js', 'assets/scripts/vendor/svg4everybody.min.js','assets/scripts/main.js']),
concat('stretch.js'),
uglify(),
gulp.dest('dist/scripts')
],
cb
);
});
// Cleaning
gulp.task('clean', function() {
return del.sync('dist').then(function(cb) {
return cache.clearAll(cb);
});
})
gulp.task('clean:dist', function() {
return del.sync(['dist/**/*', '!dist/images', '!dist/images/**/*']);
});
// Build Sequences
// ---------------
gulp.task('default', function(callback) {
runSequence(['sass', 'compress', 'browserSync', 'watch'],
callback
)
})
gulp.task('build', function(callback) {
runSequence(
'clean:dist',
['sass', 'compress', 'modernizr', 'images', 'fonts'],
callback
)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment