Update the gulpfile to reflect eslint requirements, use separate dashboard and public libraries, and add a modernizr task that accounts for included features

This commit is contained in:
Kevin MacMartin 2016-05-23 22:35:33 -04:00
parent c4538a06eb
commit 18660feac1
4 changed files with 85 additions and 65 deletions

View file

@ -1,148 +1,165 @@
// include packages // include packages
var gulp = require('gulp'), var gulp = require("gulp"),
gUtil = require('gulp-util'), gUtil = require("gulp-util"),
gLess = require('gulp-less'), gLess = require("gulp-less"),
gConcat = require('gulp-concat'), gConcat = require("gulp-concat"),
gPlumber = require('gulp-plumber'), gPlumber = require("gulp-plumber"),
gUglify = require('gulp-uglify'), gUglify = require("gulp-uglify"),
lessGlob = require('less-plugin-glob'), gModernizr = require("gulp-modernizr"),
lessAutoPrefix = require('less-plugin-autoprefix'), lessGlob = require("less-plugin-glob"),
lessCleanCSS = require('less-plugin-clean-css'); lessAutoPrefix = require("less-plugin-autoprefix"),
lessCleanCSS = require("less-plugin-clean-css");
// determine if gulp has been run with --production // determine if gulp has been run with --production
var prod = gUtil.env.production; var prod = gUtil.env.production;
// initialize plugins // initialize plugins
var autoprefix = new lessAutoPrefix({ remove: false, cascade: false, browsers: [ 'last 2 versions' ] }), var autoprefix = new lessAutoPrefix({ remove: false, cascade: false, browsers: [ "last 2 versions" ] }),
cleancss = new lessCleanCSS({ advanced: true }); cleancss = new lessCleanCSS({ advanced: true });
// declare less plugins based on wither gulp has been run with --production // declare less plugins and modernizr tests
var lessPlugins = prod ? [ lessGlob, autoprefix, cleancss ] : [ lessGlob, autoprefix ]; var lessPlugins = prod ? [ lessGlob, autoprefix, cleancss ] : [ lessGlob, autoprefix ],
modernizrTests = [];
// javascript files for the public site // javascript files for the public site
var jsPublic = [ var jsPublic = [
'resources/assets/js/site-vars.js', "resources/assets/js/site-vars.js",
'resources/assets/js/contact.js', "resources/assets/js/contact.js",
'resources/assets/js/subscription.js', "resources/assets/js/subscription.js",
'resources/assets/js/app.js' "resources/assets/js/app.js"
]; ];
// javascript libraries for the public site // javascript libraries for the public site
var jsPublicLibs = [ var jsPublicLibs = [
'bower_components/jquery/dist/jquery.min.js', "bower_components/jquery/dist/jquery.min.js",
'bower_components/bootstrap/dist/js/bootstrap.min.js', "bower_components/bootstrap/dist/js/bootstrap.min.js",
'bower_components/jQuery.stickyFooter/assets/js/jquery.stickyfooter.js' "bower_components/jQuery.stickyFooter/assets/js/jquery.stickyfooter.js"
]; ];
// javascript files for the dashboard // javascript files for the dashboard
var jsDashboard = [ var jsDashboard = [
'resources/assets/js/dashboard.js' "resources/assets/js/dashboard.js"
]; ];
// javascript libraries for the dashboard // javascript libraries for the dashboard
var jsDashboardLibs = [ var jsDashboardLibs = [
'bower_components/Sortable/Sortable.js', "bower_components/jquery/dist/jquery.min.js",
'bower_components/datetimepicker/build/jquery.datetimepicker.full.min.js', "bower_components/bootstrap/dist/js/bootstrap.min.js",
'bower_components/simplemde/dist/simplemde.min.js' "bower_components/Sortable/Sortable.js",
"bower_components/datetimepicker/build/jquery.datetimepicker.full.min.js",
"bower_components/simplemde/dist/simplemde.min.js"
]; ];
// paths to folders containing fonts that should be copied to public/fonts/ // paths to folders containing fonts that should be copied to public/fonts/
var fontPaths = [ var fontPaths = [
'resources/assets/fonts/**', "resources/assets/fonts/**",
'bower_components/bootstrap/dist/fonts/**', "bower_components/bootstrap/dist/fonts/**",
'bower_components/font-awesome/fonts/**' "bower_components/font-awesome/fonts/**"
]; ];
// function to handle gulp-plumber errors // function to handle gulp-plumber errors
function plumberError(err) { function plumberError(err) {
console.log(err); console.log(err);
this.emit('end'); this.emit("end");
} }
// function to handle the processing of less files // function to handle the processing of less files
function processLess(filename) { function processLess(filename) {
return gulp.src('resources/assets/less/' + filename + '.less') return gulp.src("resources/assets/less/" + filename + ".less")
.pipe(gPlumber(plumberError)) .pipe(gPlumber(plumberError))
.pipe(gLess({ plugins: lessPlugins, paths: 'bower_components/' })) .pipe(gLess({ plugins: lessPlugins, paths: "bower_components/" }))
.pipe(gConcat(filename + '.css')) .pipe(gConcat(filename + ".css"))
.pipe(gulp.dest('public/css/')); .pipe(gulp.dest("public/css/"));
} }
// function to handle the processing of javascript files // function to handle the processing of javascript files
function processJavaScript(ouputFilename, inputFiles) { function processJavaScript(ouputFilename, inputFiles) {
var javascript = gulp.src(inputFiles) var javascript = gulp.src(inputFiles)
.pipe(gPlumber(plumberError)) .pipe(gPlumber(plumberError))
.pipe(gConcat(ouputFilename + '.js')); .pipe(gConcat(ouputFilename + ".js"));
// minify if running gulp with --production // minify if running gulp with --production
if (prod) javascript.pipe(gUglify()); if (prod) { javascript.pipe(gUglify()); }
return javascript.pipe(gulp.dest('public/js/')); return javascript.pipe(gulp.dest("public/js/"));
} }
// gulp task for public styles // gulp task for public styles
gulp.task('less-public', function() { gulp.task("less-public", function() {
return processLess('app'); return processLess("app");
}); });
// gulp task for dashboard styles // gulp task for dashboard styles
gulp.task('less-dashboard', function() { gulp.task("less-dashboard", function() {
return processLess('dashboard'); return processLess("dashboard");
}); });
// gulp task for public javascript // gulp task for public javascript
gulp.task('js-public', function() { gulp.task("js-public", function() {
return processJavaScript('app', jsPublic); return processJavaScript("app", jsPublic);
}); });
// gulp task for public javascript libraries // gulp task for public javascript libraries
gulp.task('js-public-libs', function() { gulp.task("js-public-libs", function() {
return processJavaScript('lib', jsPublicLibs); return processJavaScript("lib", jsPublicLibs);
}); });
// gulp task for dashboard javascript // gulp task for dashboard javascript
gulp.task('js-dashboard', function() { gulp.task("js-dashboard", function() {
return processJavaScript('dashboard', jsDashboard); return processJavaScript("dashboard", jsDashboard);
}); });
// gulp task for dashboard javascript libraries // gulp task for dashboard javascript libraries
gulp.task('js-dashboard-libs', function() { gulp.task("js-dashboard-libs", function() {
return processJavaScript('lib-dashboard', jsDashboardLibs); return processJavaScript("lib-dashboard", jsDashboardLibs);
});
// gulp task for modernizr
gulp.task("modernizr", function() {
var modernizr = gulp.src([ "public/js/*.js", "public/css/*.css" ])
.pipe(gModernizr({ tests: modernizrTests, crawl: false }))
.pipe(gPlumber(plumberError))
.pipe(gConcat("modernizr.js"));
// minify if running gulp with --production
if (prod) { modernizr.pipe(gUglify()); }
return modernizr.pipe(gulp.dest("public/js/"));
}); });
// gulp task to copy fonts // gulp task to copy fonts
gulp.task('fonts', function() { gulp.task("fonts", function() {
return gulp.src(fontPaths) return gulp.src(fontPaths)
.pipe(gPlumber(plumberError)) .pipe(gPlumber(plumberError))
.pipe(gulp.dest('public/fonts/')); .pipe(gulp.dest("public/fonts/"));
}); });
// gulp watch task // gulp watch task
gulp.task('watch', function() { gulp.task("watch", function() {
var gLiveReload = require('gulp-livereload'); var gLiveReload = require("gulp-livereload");
var liveReloadUpdate = function(wait) { var liveReloadUpdate = function(wait) {
setTimeout(function() { setTimeout(function() {
gLiveReload.changed('.'); gLiveReload.changed(".");
}, wait || 1); }, wait || 1);
}; };
gLiveReload.listen(); gLiveReload.listen();
gulp.watch(jsPublic, [ 'js-public' ]).on('change', liveReloadUpdate); gulp.watch(jsPublic, [ "js-public" ]).on("change", liveReloadUpdate);
gulp.watch(jsDashboard, [ 'js-dashboard' ]).on('change', liveReloadUpdate); gulp.watch(jsDashboard, [ "js-dashboard" ]).on("change", liveReloadUpdate);
gulp.watch([ 'app/**/*.php', 'resources/views/**/*.blade.php' ]).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() { gulp.watch("resources/assets/less/**/*.less", [ "less-public", "less-dashboard" ]).on("change", function() {
liveReloadUpdate(1000); liveReloadUpdate(1000);
}); });
}); });
// gulp default task // gulp default task
gulp.task('default', [ gulp.task("default", [
'less-public', "less-public",
'less-dashboard', "less-dashboard",
'js-public', "js-public",
'js-public-libs', "js-public-libs",
'js-dashboard', "js-dashboard",
'js-dashboard-libs', "js-dashboard-libs",
'fonts' "modernizr",
"fonts"
]); ]);

View file

@ -7,6 +7,7 @@
"gulp": "^3.9.1", "gulp": "^3.9.1",
"gulp-concat": "^2.6.0", "gulp-concat": "^2.6.0",
"gulp-less": "^3.0.5", "gulp-less": "^3.0.5",
"gulp-modernizr": "^1.0.0-alpha",
"gulp-plumber": "^1.1.0", "gulp-plumber": "^1.1.0",
"gulp-uglify": "^1.5.3", "gulp-uglify": "^1.5.3",
"gulp-util": "^3.0.7", "gulp-util": "^3.0.7",

View file

@ -3,7 +3,7 @@
<head> <head>
{!! Head::render() !!} {!! Head::render() !!}
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="/js/lib.js"></script> <script src"/js/modernizr.js"></script>
@yield('page-includes') @yield('page-includes')
@if(Config::get('app.debug')) @if(Config::get('app.debug'))
@ -12,6 +12,7 @@
</script> </script>
@endif @endif
</head> </head>
<body class="{{ Request::path() == '/' ? 'index' : preg_replace('/\/.*/', '', Request::path()) }}"> <body class="{{ Request::path() == '/' ? 'index' : preg_replace('/\/.*/', '', Request::path()) }}">
@yield('page-top') @yield('page-top')
<div id="page-content">@yield('content')</div> <div id="page-content">@yield('content')</div>

View file

@ -1,6 +1,7 @@
@extends('layouts.base') @extends('layouts.base')
@section('page-includes') @section('page-includes')
<script src="/js/lib.js"></script>
<script src="/js/app.js"></script> <script src="/js/app.js"></script>
<link rel="stylesheet" href="/css/app.css" /> <link rel="stylesheet" href="/css/app.css" />
@endsection @endsection