gulpfile

gulpfile.js

// Gulp tasks

var gulp = require('gulp'),
    fs = require('fs'),
    psi = require('psi'),
    site = 'https://newproject.localtunnel.me';
    key = '';
    gutil = require('gulp-util'),
    watch = require('gulp-watch'),
    prefix = require('gulp-autoprefixer'),
    uncss = require('gulp-uncss'),
    minifyCSS = require('gulp-minify-css'),
    sass = require('gulp-sass'),
    size = require('gulp-size'),
    rename = require('gulp-rename'),
    csslint = require('gulp-csslint'),
    css = require('css'),
    browserSync = require('browser-sync'),
    browserReload = browserSync.reload,
    stylestats = require('gulp-stylestats');
    critical = require('critical');
    font64 = require('gulp-simplefont64');
    concat = require('gulp-concat');
    minifyHTML = require('gulp-minify-html');

// Use csslint without box-sizing or compatible vendor prefixes (these
// don't seem to be kept up to date on what to yell about)
gulp.task('csslint', function(){
  gulp.src('./css/site.css')
    .pipe(csslint({
          'compatible-vendor-prefixes': false,
          'box-sizing': false,
          'important': false,
          'known-properties': false
        }))
    .pipe(csslint.reporter());
});

// Task that compiles scss files down to good old css
gulp.task('pre-process', function(){
  gulp.src('./sass/site.scss')
      .pipe(watch(function(files) {
        return files.pipe(sass())
          .pipe(size({gzip: false, showFiles: true, title:'un-prefixed css'}))
          .pipe(size({gzip: true, showFiles: true, title:'un-prefixed gzipped css'}))
          .pipe(prefix())
          .pipe(size({gzip: false, showFiles: true, title:'prefixed css'}))
          .pipe(size({gzip: true, showFiles: true, title:'prefixed css'}))
          .pipe(gulp.dest('css'))
          .pipe(minifyCSS())
          .pipe(rename('site.min.css'))
          .pipe(gulp.dest('./css/'))
          .pipe(size({gzip: false, showFiles: true, title:'minified css'}))
          .pipe(size({gzip: true, showFiles: true, title:'minified css'}))
          .pipe(browserSync.reload({stream:true}));
      }));
});


gulp.task('stylestats', function () {
  gulp.src('./css/site.css')
    .pipe(stylestats());
});


// Generate Base64 fonts from files and output as css file
gulp.task('fonts', function() {
    return gulp.src(['fonts/**/*.otf', 'fonts/**/*.ttf'])
        .pipe(font64())
        .pipe(concat('raleway.css'))
        .pipe(gulp.dest('css/'));
});


// Minify and combine scripts
gulp.task('scripts', function() {
  gulp.src('./lib/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'))
});


// Initialize browser-sync which starts a static server also allows for 
// browsers to reload on filesave
gulp.task('browser-sync', function() {
    browserSync.init(null, {
        server: {
            baseDir: "./"
        },
        port: 3000,
        //tunnel allows for Google Page Speed Tests
        tunnel: "newproject"
    });
});


// Function to call for reloading browsers
gulp.task('bs-reload', function () {
    browserSync.reload();
});

/*
   DEFAULT TASK
 • Process sass then auto-prefixes and lints outputted css
 • Starts a server on port 3000
 • Reloads browsers when you change html or sass files
*/
gulp.task('default', ['pre-process', 'fonts', 'bs-reload', 'browser-sync'], function(){
  gulp.start('pre-process', 'csslint');
  gulp.watch('sass/*/*.scss', ['pre-process']);
  gulp.watch('css/site.min.css', ['bs-reload']);
  gulp.watch(['*.html'], ['bs-reload']);
});


// Copy Pre-process output and rename as non-critical.css
gulp.task('copystyles', function () {
    return gulp.src(['css/site.min.css'])
        .pipe(rename({
            basename: "non-critical" // site.css
        }))
        .pipe(gulp.dest('css'));
});

// Remove critical css from non-critical.css and place inline index.html
gulp.task('critical', ['copystyles'], function(){
  critical.generateInline({
        base: './',
        src: 'index.html',
        css: ['css/non-critical.css'],
        styleTarget: 'css/critical.css',
        htmlTarget: 'index.html',
        width: 320,
        height: 480,
        minify: true,
    });
});

gulp.task('minify-html', function() {
    var opts = {comments:true,spare:true,quotes:true,};

  gulp.src('./*.html')
    .pipe(minifyHTML(opts))
    .pipe(gulp.dest('./'))
});


//run google page speed test for mobile score
gulp.task('mobile', function () {
  psi({
    // key: key
    nokey: 'true',
    url: site,
    strategy: 'mobile',
  });
});

//run google page speed test for desktop score
gulp.task('desktop', function () {
  psi({
    // key: key,
    nokey: 'true',
    url: site,
    strategy: 'desktop',
  });
});


//run google page speed 
gulp.task('pagespeed', ['mobile', 'desktop']);



/*
   PRODUCTION TASKS
 • Separate critical css form non-critical css
 • Minify html files
 • Run Page speed tests
*/

gulp.task('production', ['critical', 'minify-html', 'pagespeed'] );