PageRenderTime 24ms CodeModel.GetById 17ms app.highlight 4ms RepoModel.GetById 1ms app.codeStats 0ms

/gulpfile.js

https://github.com/ajanthanm/colors
JavaScript | 112 lines | 20 code | 6 blank | 86 comment | 0 complexity | 4b1d66974a2022538c402f389c4d5f64 MD5 | raw file
  1// Load plugins
  2
  3var gulp = require('gulp'),
  4    gutil = require('gulp-util'),
  5    watch = require('gulp-watch'),
  6    prefix = require('gulp-autoprefixer'),
  7    minifyCSS = require('gulp-minify-css'),
  8    sass = require('gulp-sass'),
  9    myth = require('gulp-myth'),
 10    stylus = require('gulp-stylus'),
 11    rename = require('gulp-rename'),
 12    size = require('gulp-size'),
 13    csslint = require('gulp-csslint')
 14    browserSync = require('browser-sync'),
 15    browserReload = browserSync.reload;
 16
 17
 18// Use csslint without box-sizing or compatible vendor prefixes (these
 19// don't seem to be kept up to date on what to yell about)
 20
 21gulp.task('lint', function(){
 22  gulp.src('./css/*.css')
 23    .pipe(csslint({
 24          'compatible-vendor-prefixes': false,
 25          'box-sizing': false
 26        }))
 27    .pipe(csslint.reporter());
 28
 29});
 30
 31// Task that compiles scss files down to good old css
 32gulp.task('sass', function(){
 33  gulp.src('./sass/colors.scss')
 34      .pipe(watch(function(files) {
 35        return files.pipe(sass())
 36          .pipe(prefix())
 37          .pipe(size({gzip: true, showFiles: true, title:'unminified colors.css'}))
 38          .pipe(gulp.dest('css'))
 39          .pipe(browserSync.reload({stream:true}));
 40      }));
 41});
 42
 43// Task to minify colors.css then rename as colors.min.css
 44
 45gulp.task('minify', function(){
 46  gulp.src('./css/colors.css')
 47    .pipe(minifyCSS())
 48    .pipe(size({gzip: true, showFiles: true, title:'minified colors.css'}))
 49    .pipe(rename('colors.min.css'))
 50    .pipe(gulp.dest('./css/'));
 51});
 52
 53// Task that compiles css using the myth processor
 54
 55gulp.task('myth', function(){
 56  gulp.src('./myth/*.css')
 57    .pipe(watch(function(files) {
 58      return files.pipe(myth())
 59      .pipe(prefix())
 60      .pipe(gulp.dest('./css/'));
 61    }));
 62});
 63
 64
 65// Just runs autoprefixer on the compiled css
 66
 67gulp.task('prefix', function(){
 68  gulp.src('./css/*.css')
 69      .pipe(prefix())
 70      .pipe(gulp.dest('./css/'));
 71});
 72
 73gulp.task('stylus', function(){
 74  gulp.src('./stylus/colors.styl')
 75      .pipe(watch(function(files) {
 76        return files.pipe(stylus())
 77        .pipe(prefix())
 78        .pipe(gulp.dest('./css/'));
 79      }));
 80});
 81
 82// Initialize browser-sync which starts a static server also allows for 
 83// browsers to reload on filesave
 84gulp.task('browser-sync', function() {
 85    browserSync.init(null, {
 86        server: {
 87            baseDir: "./"
 88        }
 89    });
 90});
 91
 92gulp.task('bs-reload', function () {
 93    browserSync.reload();
 94});
 95
 96/*
 97   DEFAULT TASK
 98
 99 • Process sass and lints outputted css
100 • Outputted css is run through autoprefixer
101 • Runs jshint on all js files in ./js/
102 • Sends updates to any files in directory to browser for
103 automatic reloading
104
105*/
106
107gulp.task('default', function(){
108    gulp.watch(['./sass/colors.scss'], function(event) {
109      gulp.run('sass', 'lint');
110    });
111});
112