var del = require('del'); var run = require('run-sequence'); var gulp = require('gulp'); var plumber = require('gulp-plumber'); var stylelint = require('gulp-stylelint'); var cleanCSS = require('gulp-clean-css'); var size = require('gulp-size'); var postcss = require('gulp-postcss'); var sprites = require('postcss-sprites').default; var cssnext = require('postcss-cssnext'); var base64 = require('gulp-base64'); var svgstore = require('gulp-svgstore'); var svgmin = require('gulp-svgmin'); var change = require('gulp-change'); function addSourcesTimestamp(content) { var source = content.split('\n'); var outputLine = ''; var result = ''; var timestamp = Math.round(new Date().getTime() / 1000); source.forEach(function (line) { if( line.indexOf('rel="stylesheet"') !== -1 ) { outputLine = line.replace('.css"', '.css?' + timestamp + '"'); result += outputLine + '\n'; } else if ( line.indexOf('', ''); result += outputLine + '\n'; } else { result += line + '\n'; } }); return result; } function symbolsImgToSpriteSvg(content) { var source = content.split('\n'); var outputLine = []; var result = ''; var i; var indentString; var classString; var idString; var widthString; var heightString; var titleString; var srcString; var pathString; var nameString; var timestamp = Math.round(new Date().getTime() / 1000); source.forEach(function (line) { if( line.indexOf('symbols/') !== -1 ) { /* get indent */ for (indentString = '', i = 0; i < line.indexOf(''; outputLine[1] = indentString + ' ' + ''; outputLine[2] = indentString + ''; result += outputLine[0] + '\n' + outputLine[1] + '\n' + outputLine[2] + '\n'; } else { result += line + '\n'; } }); return result; } // Clean up production folder gulp.task('clean', function() { return del('production/*'); }); // Temp: copy gulp.task('temp', function() { return gulp.src('development/temp/**/*') .pipe(plumber()) .pipe(gulp.dest('production/temp/')) ; }); // Content: copy gulp.task('content', function() { return gulp.src('development/content/**/*') .pipe(plumber()) .pipe(gulp.dest('production/content/')) ; }); // Images: copy gulp.task('images', function() { return gulp.src('development/images/**/*') .pipe(plumber()) .pipe(gulp.dest('production/images/')) ; }); // Markups: copy and change symbols to sprite gulp.task('markups', function() { return gulp.src('development/markups/**/*') .pipe(plumber()) .pipe(change(symbolsImgToSpriteSvg)) .pipe(change(uncommentGoogleFonts)) .pipe(change(addSourcesTimestamp)) .pipe(gulp.dest('production/markups/')) ; }); // Layouts: copy and change symbols to sprite gulp.task('layouts', function() { return gulp.src('development/layouts/**/*') .pipe(plumber()) .pipe(change(symbolsImgToSpriteSvg)) .pipe(change(uncommentGoogleFonts)) .pipe(change(addSourcesTimestamp)) .pipe(gulp.dest('production/layouts/')) ; }); // Vendors: copy but exclude normalize gulp.task('vendors', function() { return gulp.src([ '!development/vendors/normalize/**/*', '!development/vendors/normalize/', 'development/vendors/**/*' ]) .pipe(plumber()) .pipe(gulp.dest('production/vendors/')) ; }); // Scripts: copy gulp.task('scripts', function() { return gulp.src('development/scripts/**/*') .pipe(plumber()) .pipe(gulp.dest('production/scripts/')) ; }); // Symbols gulp.task('symbols', function() { return gulp.src('development/symbols/*.svg') .pipe(plumber()) .pipe(svgmin()) .pipe(svgstore()) .pipe(gulp.dest('production/symbols/')); }); // Styles: concat, add prefixes, compress, copy gulp.task('styles', function() { var spritesOptions = { stylesheetPath: 'production/styles', spritePath: 'production/sprites', retina: 'true', filterBy: function(image) { // Allow files from /sprites/ only if (!/\/sprites\//.test(image.url)) { return Promise.reject(); } return Promise.resolve(); } }; var processors = [ sprites(spritesOptions), cssnext({ 'browsers': 'last 5 versions' // for autoprefixer and features list }) ]; return gulp.src([ 'development/styles/style.css' ]) .pipe(plumber()) .pipe(cleanCSS({ advanced: false, keepSpecialComments: 0 })) .pipe(postcss(processors)) .pipe(base64({ // Allow files from /vectors/ only exclude: ['/sprite/', '/images/', '/symbols/'] })) .pipe(gulp.dest('production/styles/')) .pipe(size()) ; }); // lint gulp.task('lint', function() { return gulp.src([ '!development/styles/style.css', 'development/styles/**/*.css' ]) .pipe(plumber()) .pipe(stylelint({ reporters: [ {formatter: 'string', console: true} ] })) ; }); gulp.task('default', function (fn) { run('clean', 'temp', 'content', 'images', 'markups', 'layouts', 'vendors', 'scripts', 'symbols', 'styles', 'lint', fn); });