20 June, 2016

Gulp

I've experimented with automation, here's the first Gulp file (yea, it's work in progress).
 
/* 

GULP - watch and compile code 
=============================

File: gulpfile.js
Version: 0.1
Tags: Sass watch, Sass compile
By: Per Thykjaer Jensen
Url: http://multimusen.dk/

## Howto

 1. Download plugin
 2. Require the plugin
 3. Define a gulp.task

Run the task either:

 * :: gulp [taskname]
 * or add the task to the gulp.task default and run via :: gulp

Best Practise
=============

Separate your working files into a src/ and a dest/ directory. 
This is my first playground, so the pressent file 
structure is a darn mess.

*/

//'use strict';

// === Gulps ===
var gulp = require('gulp');
var sass = require('gulp-sass');


// sass compiler
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(gulp.dest('.'));
});

// watcher
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

// sass lint
var sassLint = require('gulp-sass-lint');
 
gulp.task('sassLint', function () {
  gulp.src('sass/**/*.s+(a|c)ss')
    .pipe(sassLint())
    .pipe(sassLint.format())
    .pipe(sassLint.failOnError());
});

// minify images
var imagemin = require('gulp-imagemin');
 
gulp.task('imageMin', function () {
 gulp.src('images/*')
  .pipe(imagemin())
  .pipe(gulp.dest('images/mini'));
});


// === Javascript Lint ===
var jslint = require('gulp-jslint');
var jshint = require('gulp-jshint');
 
gulp.task('lintJs', function () {
    return gulp.src(['js/*.js'])
        .pipe(jshint({ /* lint placeholder */ }))
  .pipe(jshint.reporter());

});


// === Jade Template Engine ===
jade = require('gulp-jade');

// run this task by typing in gulp jade in CLI
gulp.task('jade', function() {
    return gulp.src('src/templates/**/*.jade')
        .pipe(jade()) // pip to jade plugin
        .pipe(gulp.dest('builds/development')); 
});


// === Default ===
gulp.task('default', [
  'sass',
  'sass:watch',
  'imageMin',
  'lintJs'], function() {
});

No comments: