Gulp for Mura Workflows

gulpfile.js

//requirements
'use strict';

// IF YOU USE $ASSETPATH IN YOUR JS FILES, IT WILL GET REPLACED BY GULP TO A VALUE YOU SET HERE.
var _ASSETPATH        = '$ASSETPATH';
var _LOCAL_ASSETPATH  = 'assets'
var _MURA_ASSETPATH   = '/plugins/banning/includes/assets'

// GULP DEFAULTS
var gulp        = require('gulp');
var gutil       = require('gulp-util');
var watch       = require('gulp-watch');
var fileinclude = require('gulp-file-include');
var size        = require('gulp-size');
var chmod       = require('gulp-chmod');

// SCSS / SASS
var sass        = require('gulp-sass');
var minifycss   = require('gulp-minify-css');

// JS
var concat      = require('gulp-concat');
var order       = require('gulp-order');
var uglify      = require('gulp-uglify');
var replace     = require('gulp-replace');

// IMAGES
var imagemin    = require('gulp-imagemin');

// BROWSERSYNC
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;


// MAIN MODES
gulp.task('default',['sass','fileinclude','images','js','media','fonts','watch']);
gulp.task('mura',['sass','fileinclude','images','js','media','export-css', 'export-js','export-img','export-media','export-fonts','mura-watch']);

// Compiles js to a minified version
gulp.task('js', function() {
  return gulp.src('./app/assets/js/**/*.js')
    .pipe(uglify())
    .pipe(concat('banning.js'))
    .pipe(replace(_ASSETPATH,_LOCAL_ASSETPATH))
    .pipe(chmod(644))
    .pipe(gulp.dest('./build/assets/js'));
});

// Compiles sass to its destinations
gulp.task('sass', function () {
  gulp.src('./app/assets/sass/*.sass')
    .pipe(sass().on('error', sass.logError))
    .pipe(minifycss())
    .pipe(gulp.dest('./build/assets/css'))
    .pipe(reload({stream:true}));
});

// Copies images
gulp.task('images', function () {
  gulp.src('./app/assets/img/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest('./build/assets/img'))
    .pipe(reload({stream:true}))
    .pipe(size());
});

// Media
gulp.task('media', function () {
  gulp.src('./app/assets/media/**/*')
    .pipe(gulp.dest('./build/assets/media'))
    .pipe(reload({stream:true}));
});


// Fonts
gulp.task('fonts', function () {
  gulp.src('./app/assets/fonts/**/*')
    .pipe(gulp.dest('./build/assets/fonts'))
    .pipe(reload({stream:true}));
});


//makes it possible to include html files into templatges
gulp.task('fileinclude', function() {
  gulp.src(['./app/*.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./build'))
    .pipe(reload({stream:true}));
});

var mura_assets = "../../mura_dev/banning/plugins/banning/includes/assets/";
//exporting css naar de mura omgeving. DOET DIT ALLEEN ALS JE OP DEVELOP ZIT OF GELIJKT BENT AAN DEVELOP
gulp.task('export-css', function () {
  gulp.src('./app/assets/sass/*.sass')
    .pipe(sass().on('error', sass.logError))
    .pipe(minifycss())
    .pipe(gulp.dest(mura_assets+'/css'))
    .pipe(reload({stream:true}));
});
//exporting js naar de mura omgeving. DOET DIT ALLEEN ALS JE OP DEVELOP ZIT OF GELIJKT BENT AAN DEVELOP
gulp.task('export-js', function () {
  return gulp.src('./app/assets/js/**/*.js')
    .pipe(uglify().on('error', gutil.log)) // notice the error event here
    .pipe(concat('banning.js'))
    .pipe(replace(_ASSETPATH,_MURA_ASSETPATH))
    .pipe(chmod(644))
    .pipe(gulp.dest(mura_assets+'/js'));
});
//exporting IMAGES naar de mura omgeving. DOET DIT ALLEEN ALS JE OP DEVELOP ZIT OF GELIJKT BENT AAN DEVELOP
gulp.task('export-img', function () {
  gulp.src('./build/assets/img/*')
    .pipe(imagemin())
    .pipe(gulp.dest(mura_assets+'/img'))
    .pipe(reload({stream:true}));
});

gulp.task('export-media', function () {
  gulp.src('./build/assets/media/*')
    .pipe(gulp.dest(mura_assets+'/media'))
    .pipe(reload({stream:true}));
});

// Fonts
gulp.task('export-fonts', function () {
  gulp.src('./app/assets/fonts/**/*')
    .pipe(gulp.dest(mura_assets+'/fonts'))
    .pipe(reload({stream:true}));
});


//watchtes Sass, JS and HTML changes
gulp.task('watch', function () {
  gulp.watch('./app/assets/sass/**/*', ['sass']);
  gulp.watch('./app/assets/js/**/*.js', ['js']);
  gulp.watch('./app/assets/img/**/*', ['images']);
  gulp.watch('./app/assets/media/**/*', ['media']);
  gulp.watch('./app/**/*.html', ['fileinclude']);
});


//watchtes Sass, JS and HTML changes
gulp.task('mura-watch', function () {
  gulp.watch('./app/assets/sass/**/*', ['sass','export-css']);
  gulp.watch('./app/assets/js/**/*.js', ['js','export-js']);
  gulp.watch('./app/assets/img/**/*', ['images','export-img']);
  gulp.watch('./app/assets/media/**/*', ['media','export-media']);
  gulp.watch('./app/**/*.html', ['fileinclude']);
});

package.json

{
  "name": "banning-html",
  "version": "1.0.0",
  "description": "The HTML+CSS+JS frontend for the Banning Mura website",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "[email protected]:labela/banning-html.git"
  },
  "author": "Label A",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.9.1",
    "gulp": "^3.9.0",
    "gulp-chmod": "~1.2.0",
    "gulp-concat": "~2.6.0",
    "gulp-file-include": "^0.13.7",
    "gulp-imagemin": "^2.3.0",
    "gulp-minify-css": "^1.2.1",
    "gulp-order": "~1.1.1",
    "gulp-replace": "^0.5.4",
    "gulp-sass": "^2.0.4",
    "gulp-size": "^2.0.0",
    "gulp-uglify": "^1.4.0",
    "gulp-watch": "^4.3.5"
  }
}