// Setup project var source_folder = { watch: ['source/style/hippie/**/*.scss', 'source/style/**/*.scss', 'source/templates/**/*.+(html|njk)', 'source/pages/**/*.+(html|njk)'], styles: ['source/style/hippie/*.+(scss|sass)', 'source/style/**/*.+(scss|sass)'], scripts: ['source/code/hippie/variables.js', 'source/code/hippie/functions.js', 'source/code/hippie/global.js', 'source/code/**/*.coffee', '!source/vendor/**/*', ], images: 'source/art/**/*', pages: 'source/pages/**/*.+(html|njk)', vendor: 'vendor/**/*', root: 'source' }; var build_folder = { styles: 'build/css', scripts: 'build/js', images: 'build/art', vendor: 'build/vendor', pages: 'build/**/*.html', root: 'build' } // Load plugins const fs = require('fs'); const gulp = require('gulp'); // const rename = require('gulp-rename'); const del = require('del'); const gulpif = require('gulp-if'); const sequencer = require('run-sequence'); const sourcemap = require('gulp-sourcemaps'); const prefix = require('gulp-autoprefixer'); const sass = require('gulp-sass'); // const rubysass = require('gulp-ruby-sass'); const nunjucks = require('gulp-nunjucks-render'); // const cssnano = require('gulp-cssnano'); const jshint = require('gulp-jshint'); const jscs = require('gulp-jscs'); // const useref = require('gulp-useref'); const sasslint = require('gulp-sass-lint'); // const imagemin = require('gulp-imagemin'); const spritesmith = require('gulp.spritesmith'); // const changed = require('gulp-changed'); // const newer = require('gulp-newer'); const plumber = require('gulp-plumber'); const notify = require('gulp-notify'); const data = require('gulp-data'); const browsersync = require('browser-sync').create(); // only used for js task const concat = require('gulp-concat'); const pump = require('pump'); const composer = require('gulp-uglify/composer'); const uglifyjs = require('uglify-es'); const minify = composer(uglifyjs, console); const cache = require('gulp-cached'); const remember = require('gulp-remember'); // this is for the looks gulp.task('sass', function() { return gulp.src(source_folder.styles) .pipe(plumbError('Error Running Sass')) .pipe(sourcemap.init()) .pipe(sass({ includePaths: [source_folder.root+'/bower_components'] })) .pipe(prefix(['>= 4%', 'last 2 version'])) // .pipe(cssnano()) .pipe(sourcemap.write()) .pipe(gulp.dest(build_folder.styles)) .pipe(browsersync.reload({ stream: true })) }); // and this is functionality gulp.task('js', function(cb) { pump([ gulp.src(source_folder.scripts), cache('scripts'), jshint('.jshintrc'), jshint.reporter('default'), sourcemap.init(), minify(), remember('scripts'), concat('all.min.js'), sourcemap.write(), gulp.dest(build_folder.scripts), browsersync.stream() ], cb); }); // templating engine gulp.task('nunjucks', function() { return gulp.src('source/pages/**/*.+(html|njk)') .pipe(plumbError('Error Running Nunjucks')) .pipe(data(function() { return JSON.parse(fs.readFileSync('./source/demo_data.json')) })) .pipe(nunjucks({ path: ['source/templates'], envOptions: { trimBlocks: true } })) .pipe(gulp.dest(build_folder.root)) .pipe(browsersync.reload({ stream: true })) }); // automagically reload browsers gulp.task('syncreload', function() { browsersync.init({ // online: false, // logLevel: "info", // proxy: "http://verser.vrt/virtual/", // watch: true, index: "demo.html", open: false, server: 'build' }); }); // creates sprites from files in art/sprites folder gulp.task('sprites', function() { gulp.src('source/art/sprites/**/*') .pipe(spritesmith({ cssName: '_sprites.scss', imgName: 'sprites.png' })) .pipe(gulpif('*.png', gulp.dest(build_folder.images))) .pipe(gulpif('*.scss', gulp.dest('source/style/hippie/modules/media'))); }); // linting ... gulp.task('lint:js', function() { return gulp.src('source/code/**/*.js') .pipe(plumbError('JSHint Error')) .pipe(jshint()) .pipe(jshint.reporter('jshint-stylish')) .pipe(jshint.reporter('fail', { ignoreWarning: true, ignoreInfo: true })) .pipe(jscs({ fix: false, configPath: '.jscsrc' })) // .pipe(jscs.reporter()); }); gulp.task('lint:scss', function() { return gulp.src('source/style/**/*.scss') .pipe(plumbError('SASSLint Error')) .pipe(sasslint({ configFile: '.sass-lint.yml' })) }) // cleans the build folder gulp.task('clean:dev', function() { del.sync([ build_folder.styles, build_folder.pages, build_folder.root+'/*.html' ]); }); // watch over changes and react // split up into sub tasks gulp.task('watch-js', ['lint:js', 'js'], browsersync.reload); gulp.task('overwatch', function() { gulp.watch('source/code/**/*.js', ['watch-js']) gulp.watch('source/style/**/*.+(scss|sass)', ['sass', 'lint:scss']); gulp.watch([ 'source/templates/**/*', 'source/pages/**/*.+(html|njk)', 'source/demo_data.json' ], ['nunjucks']); }); // The default task (called when you run `gulp` from cli) gulp.task('default', function(callback) { sequencer( 'clean:dev', ['sprites', 'lint:js', 'lint:scss'], ['sass', 'js', 'nunjucks'], ['syncreload', 'overwatch'], callback ) }); function plumbError(errTitle) { return plumber({ errorHandler: notify.onError({ // Customizing error title title: errTitle || "Error running Gulp", message: "Error: <%= error.message %>", sound: true }) }); } // NOTE // to be deleted var oldsource = { watch: ['source/style/hippie/**/*.scss', 'source/style/**/*.scss', 'source/templates/**/*.+(html|njk)', 'source/pages/**/*.+(html|njk)'], styles: ['source/style/demo.scss', 'source/style/maintenance.scss'], scripts: ['source/code/hippie/variables.js', 'source/code/hippie/functions.js', 'source/code/hippie/global.js', 'source/code/**/*.coffee', '!source/vendor/**/*', ], images: 'source/art/**/*', pages: 'source/pages/**/*.+(html|njk)', vendor: 'vendor/**/*' }; var oldbuild = { styles: 'build/css', scripts: 'build/js', images: 'build/art', vendor: 'build/vendor', root: 'build' } // Task - Clean build directory gulp.task('clean', function() { return del([oldbuild.scripts, oldbuild.styles, oldbuild.images]); }); // Task - Styles gulp.task('styles', () => rubysass(oldsource.styles, {sourcemap: true}) .on('error', rubysass.logError) // .pipe(newer({dest: oldbuild.styles, ext: '.css'})) .pipe(prefix('last 2 version')) .pipe(gulp.dest(oldbuild.styles)) .pipe(rename({suffix: '.min'})) .pipe(cssnano()) .pipe(sourcemap.write('.', { includeContent: false, sourceRoot: 'source' })) .pipe(gulp.dest(oldbuild.styles)) .pipe(browsersync.stream({match: '**/*.css'})) // .pipe(notify({message: 'Style task complete'})) ); // Task - Scripts gulp.task('scripts', function(cb) { pump([ gulp.src(oldsource.scripts), cache('scripts'), jshint('.jshintrc'), jshint.reporter('default'), sourcemap.init(), minify(), remember('scripts'), concat('all.min.js'), sourcemap.write(), gulp.dest(oldbuild.scripts), browsersync.stream() ], cb); }); // Task - Images gulp.task('images', function() { return gulp.src(oldsource.images) .pipe(changed(oldbuild.images)) // .pipe(cache(imagemin({ // optimizationLevel: 3, // progressive: true, // interlaced: true }))) // ) .pipe(gulp.dest(oldbuild.images)) // .pipe(notify({ message: 'Images task complete' })) ; }); // Task - Vendor gulp.task('vendor', function() { return gulp.src(oldsource.vendor) .pipe(plumbError()) .pipe(gulp.dest(oldbuild.vendor)) ; }); //Task - Nunjucks gulp.task('oldnunjucks', function() { return gulp.src(oldsource.pages) // .pipe(changed(oldbuild.root)) .pipe(nunjucks({ path: ['source/templates'], envOptions: { trimBlocks: true } })) .pipe(gulp.dest(oldbuild.root)) }); // a task that ensures the other task is complete before reloading browsers gulp.task('prewatch', ['oldnunjucks', 'styles'], function(done) { browsersync.reload(); done(); }); // Old watch for file changes gulp.task('oldwatch', ['styles', 'scripts', 'oldnunjucks'], function() { browsersync.init({ open: false, server: oldbuild.root, // proxy: "http://verser.vrt/virtual/" }); gulp.watch(oldsource.scripts, ['scripts']).on('change', function(event) { if (event.type === 'deleted') { delete cache.caches['scripts'][event.path]; remember.forget('scripts', event.path); } }); // gulp.watch(oldsource.watch, ['prewatch']); gulp.watch(oldsource.watch, ['styles', 'oldnunjucks']).on('change', browsersync.reload); // gulp.watch(oldsource.images, ['images']); }); gulp.task('olddefault', ['clean', 'styles', 'scripts', 'images', 'nunjucks']); // function errorHandler(err) { // // Logs out error in the command line // console.log(err.toString()); // // Ends the current pipe, so Gulp watch doesn't break // this.emit('end'); // }