Replace laravel-elixir with pure gulp

gulpfile.js

@@ -1,62 +1,148 @@
-process.env.DISABLE_NOTIFIER = true;
+// include packages
-
 var gulp           = require('gulp'),
-    elixir   = require('laravel-elixir'),
+    gUtil          = require('gulp-util'),
-    lessglob = require('less-plugin-glob');
+    gLess          = require('gulp-less'),
+    gConcat        = require('gulp-concat'),
+    gPlumber       = require('gulp-plumber'),
+    gUglify        = require('gulp-uglify'),
+    lessGlob       = require('less-plugin-glob'),
+    lessAutoPrefix = require('less-plugin-autoprefix'),
+    lessCleanCSS   = require('less-plugin-clean-css');
 
-// autoprefixer settings
+// determine if gulp has been run with --production
-elixir.config.autoprefix = {
+var prod = gUtil.env.production;
-    remove: false,
-    cascade: false,
-    browsers: [ 'last 2 versions' ]
-};
 
-// javascript files for the dashboard in resources/assets/js/
+// initialize plugins
+var autoprefix = new lessAutoPrefix({ remove: false, cascade: false, browsers: [ 'last 2 versions' ] }),
+    cleancss   = new lessCleanCSS({ advanced: true });
+
+// declare less plugins based on wither gulp has been run with --production
+var lessPlugins = prod ? [ lessGlob, autoprefix, cleancss ] : [ lessGlob, autoprefix ];
+
+// javascript files for the public site
+var jsPublic = [
+    'resources/assets/js/site-vars.js',
+    'resources/assets/js/contact.js',
+    'resources/assets/js/subscription.js',
+    'resources/assets/js/app.js'
+];
+
+// javascript libraries for the public site
+var jsPublicLibs = [
+    'bower_components/jquery/dist/jquery.min.js',
+    'bower_components/bootstrap/dist/js/bootstrap.min.js',
+    'bower_components/jQuery.stickyFooter/assets/js/jquery.stickyfooter.js'
+];
+
+// javascript files for the dashboard
 var jsDashboard = [
-    'dashboard.js'
+    'resources/assets/js/dashboard.js'
 ];
 
-// javascript files for the public site in resources/assets/js/
+// javascript libraries for the dashboard
-var jsLocal = [
+var jsDashboardLibs = [
-    'site-vars.js',
+    'bower_components/Sortable/Sortable.js',
-    'contact.js',
+    'bower_components/datetimepicker/build/jquery.datetimepicker.full.min.js',
-    'subscription.js',
+    'bower_components/simplemde/dist/simplemde.min.js'
-    'app.js'
 ];
 
-// javascript files in bower_components/ for libraries
+// paths to folders containing fonts that should be copied to public/fonts/
-var jsBower = [
+var fontPaths = [
-    'jquery/dist/jquery.min.js',
+    'resources/assets/fonts/**',
-    'bootstrap/dist/js/bootstrap.min.js',
+    'bower_components/bootstrap/dist/fonts/**',
-    'jQuery.stickyFooter/assets/js/jquery.stickyfooter.js'
+    'bower_components/font-awesome/fonts/**'
 ];
 
-var jsDashboardBower = [
+// function to handle gulp-plumber errors
-    'Sortable/Sortable.js',
+function plumberError(err) {
-    'datetimepicker/build/jquery.datetimepicker.full.min.js',
+    console.log(err);
-    'simplemde/dist/simplemde.min.js'
+    this.emit('end');
-];
+}
 
-// less import path locations other than resources/assets/less/
+// function to handle the processing of less files
-var lessPaths = [ 'bower_components' ];
+function processLess(filename) {
+    return gulp.src('resources/assets/less/' + filename + '.less')
+        .pipe(gPlumber(plumberError))
+        .pipe(gLess({ plugins: lessPlugins, paths: 'bower_components/' }))
+        .pipe(gConcat(filename + '.css'))
+        .pipe(gulp.dest('public/css/'));
+}
 
-elixir(function(mix) {
+// function to handle the processing of javascript files
-    // compile the project
+function processJavaScript(ouputFilename, inputFiles) {
-    mix
+    var javascript = gulp.src(inputFiles)
-        .copy('bower_components/bootstrap/dist/fonts/**', 'public/fonts')
+        .pipe(gPlumber(plumberError))
-        .copy('bower_components/font-awesome/fonts/**', 'public/fonts')
+        .pipe(gConcat(ouputFilename + '.js'));
-        .copy('resources/assets/fonts/**', 'public/fonts')
-        .less('dashboard.less', 'public/css/dashboard.css', { paths: lessPaths, plugins: [lessglob] })
-        .less('app.less', 'public/css/app.css', { paths: lessPaths, plugins: [lessglob] })
-        .scripts(jsLocal, 'public/js/app.js', 'resources/assets/js/')
-        .scripts(jsDashboard, 'public/js/dashboard.js', 'resources/assets/js/')
-        .scripts(jsBower, 'public/js/lib.js', 'bower_components/')
-        .scripts(jsDashboardBower, 'public/js/lib-dashboard.js', 'bower_components/')
-        .version(['css/dashboard.css', 'css/app.css', 'js/dashboard.js', 'js/app.js', 'js/lib.js', 'js/lib-dashboard.js']);
 
-    if (!elixir.config.production) {
+    // minify if running gulp with --production
-        // start livereload when not production
+    if (prod) javascript.pipe(gUglify());
-        require('laravel-elixir-livereload');
+    return javascript.pipe(gulp.dest('public/js/'));
-        mix.livereload();
+}
-    }
+
+// gulp task for public styles
+gulp.task('less-public', function() {
+    return processLess('app');
 });
+
+// gulp task for dashboard styles
+gulp.task('less-dashboard', function() {
+    return processLess('dashboard');
+});
+
+// gulp task for public javascript
+gulp.task('js-public', function() {
+    return processJavaScript('app', jsPublic);
+});
+
+// gulp task for public javascript libraries
+gulp.task('js-public-libs', function() {
+    return processJavaScript('lib', jsPublicLibs);
+});
+
+// gulp task for dashboard javascript
+gulp.task('js-dashboard', function() {
+    return processJavaScript('dashboard', jsDashboard);
+});
+
+// gulp task for dashboard javascript libraries
+gulp.task('js-dashboard-libs', function() {
+    return processJavaScript('lib-dashboard', jsDashboardLibs);
+});
+
+// gulp task to copy fonts
+gulp.task('fonts', function() {
+    return gulp.src(fontPaths)
+        .pipe(gPlumber(plumberError))
+        .pipe(gulp.dest('public/fonts/'));
+});
+
+// gulp watch task
+gulp.task('watch', function() {
+    var gLiveReload = require('gulp-livereload');
+
+    var liveReloadUpdate = function(wait) {
+        setTimeout(function() {
+            gLiveReload.changed('.');
+        }, wait || 1);
+    };
+
+    gLiveReload.listen();
+    gulp.watch(jsPublic, [ 'js-public' ]).on('change', liveReloadUpdate);
+    gulp.watch(jsDashboard, [ 'js-dashboard' ]).on('change', liveReloadUpdate);
+    gulp.watch([ 'app/**/*.php', 'resources/views/**/*.blade.php' ]).on('change', liveReloadUpdate);
+
+    gulp.watch('resources/assets/less/**/*.less', [ 'less-public', 'less-dashboard' ]).on('change', function() {
+        liveReloadUpdate(1000);
+    });
+});
+
+// gulp default task
+gulp.task('default', [
+    'less-public',
+    'less-dashboard',
+    'js-public',
+    'js-public-libs',
+    'js-dashboard',
+    'js-dashboard-libs',
+    'fonts'
+]);

package.json

@@ -1,11 +1,17 @@
 {
   "private": true,
   "devDependencies": {
-    "laravel-elixir-livereload": "^1.1.5-beta1"
+    "gulp-livereload": "^3.8.1"
   },
   "dependencies": {
     "gulp": "^3.9.1",
-    "laravel-elixir": "^5.0.0",
+    "gulp-concat": "^2.6.0",
+    "gulp-less": "^3.0.5",
+    "gulp-plumber": "^1.1.0",
+    "gulp-uglify": "^1.5.3",
+    "gulp-util": "^3.0.7",
+    "less-plugin-autoprefix": "^1.5.1",
+    "less-plugin-clean-css": "^1.5.1",
     "less-plugin-glob": "^1.1.1"
   }
 }

resources/views/layouts/base.blade.php

@@ -3,7 +3,7 @@
     <head>
         {!! Head::render() !!}
         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-        <script src="{{ elixir('js/lib.js') }}"></script>
+        <script src="/js/lib.js"></script>
         @yield('page-includes')
 
         @if(Config::get('app.debug'))

resources/views/layouts/dashboard.blade.php

@@ -1,9 +1,9 @@
 @extends('layouts.base')
 
 @section('page-includes')
-    <script src="{{ elixir('js/lib-dashboard.js') }}"></script>
+    <script src="/js/lib-dashboard.js"></script>
-    <script src="{{ elixir('js/dashboard.js') }}"></script>
+    <script src="/js/dashboard.js"></script>
-    <link rel="stylesheet" href="{{ elixir('css/dashboard.css') }}" />
+    <link rel="stylesheet" href="/css/dashboard.css" />
 @endsection
 
 @section('page-top')

resources/views/layouts/public.blade.php

@@ -1,8 +1,8 @@
 @extends('layouts.base')
 
 @section('page-includes')
-    <script src="{{ elixir('js/app.js') }}"></script>
+    <script src="/js/app.js"></script>
-    <link rel="stylesheet" href="{{ elixir('css/app.css') }}" />
+    <link rel="stylesheet" href="/css/app.css" />
 @endsection
 
 @section('page-top')