Merge pull request #12 from benfurfie/feature/1.1.0

Feature/1.1.0

[new] Added BrowserSync support.
[new] Added gulp preflight task to run purgeCSS.
[new] If you set your environment to production in your .env file, it will inject the minified CSS and JS files. Otherwise it will inject the non-compressed versions (thanks to Vladdu for the pull requests).

[fix] Changed a title in the .gitignore file to reflect what the section actually does.

.gitignore

@@ -2,6 +2,6 @@
 /node_modules
 /vendor
 
-# Ignore build files
+# Ignore lock and log files
 yarn.lock
 yarn-error.log

README.md

@@ -35,6 +35,8 @@ Before going through these steps, you'll need either Yarn or NPM installed (my p
 
 **gulp dev** will run in the background and configure your CSS and JS in the background. You shouldn't need to restart it, unless you accidentally save something that breaks the task. If that happens, fix the issue and then re-run `gulp dev`.
 
+**gulp preflight** will run compile all of your assets, but will also run purgeCSS. This is the task you want to run when you're getting ready to push a site to production. I don't recommend running it as part of a CI as there is a chance that if you haven't whitelisted a class in the purgeCSS configuration, you may find it breaks your site without noticing. 
+
 ## Folder Structure
 
 The folder structure is based on years of experience building and maintaining complex websites. However, that doesn't mean if you're building a simple site, you won't benefit!

gulpfile.js

@@ -1,3 +1,10 @@
+/**
+ * BrowserSync config
+ * 
+ * In order to ensure that BrowserSync works with your site, add your local URL here.
+ */
+var localUrl = 'http://gust.localhost';
+
 /**
  * Required Packages
  */
@@ -13,6 +20,7 @@ var gulp = require('gulp'),
     webpack = require('webpack-stream'),
     tailwindcss = require('tailwindcss'),
     purgecss = require('@fullhuman/postcss-purgecss');
+    browserSync = require('browser-sync').create();
 
 
 class TailwindExtractor {
@@ -37,35 +45,7 @@ gulp.task('css:compile', function() {
     return gulp.src('./assets/styles/app.scss')
     .pipe(sass())
     .pipe(postcss([
-        tailwindcss('./tailwind.config.js'),
-        purgecss({
-            content: [
-                'layouts/**/*.html',
-                'templates/**/*.html',
-                'partials/**/*.html',
-            ],
-            extractors: [
-                {
-                    extractor: TailwindExtractor,
-                    extensions: ['html', 'js', 'php', 'vue'],
-                }
-            ],
-            /**
-             * You can whitelist selectors to stop purgecss from removing them from your CSS.
-             * see: https://www.purgecss.com/whitelisting
-             * 
-             * Any selectors defined below will not be stripped from the min.css file.
-             * PurgeCSS will not purge the standard app.css file as this is useful for development.
-             * 
-             * @since 1.0.0
-             */
-            whitelist: [
-                'h2',
-                'h3',
-                'p',
-                'blockquote',
-            ],
-        })
+        tailwindcss('./tailwind.config.js')
     ]))
     .pipe(rename({
         extname: '.css'
@@ -82,6 +62,7 @@ gulp.task('css:compile', function() {
  * Minify the CSS
  * 
  * @since 1.0.0
+ * @version 1.1.0
  */
 gulp.task('css:minify', ['css:compile'], function() {
     return gulp.src([
@@ -93,6 +74,7 @@ gulp.task('css:minify', ['css:compile'], function() {
         suffix: '.min'
     }))
     .pipe(gulp.dest('./css'))
+    .pipe(browserSync.stream())
     .pipe(notify(
         {
             message: 'CSS minified'
@@ -111,12 +93,14 @@ gulp.task('css', ['css:minify']);
  * Minify JS
  * 
  * @since 1.0.0
+ * @version 1.1.0
  */
 gulp.task('js:minify', function() {
     return gulp.src('assets/scripts/main.js')
     .pipe(webpack( require('./webpack.config.js') ))
     .pipe(rename({suffix: '.min'}))
     .pipe(gulp.dest('./js'))
+    .pipe(browserSync.stream())
     .pipe(notify({ message: 'Scripts task complete' }));
 });
 
@@ -131,6 +115,7 @@ gulp.task('js', ['js:minify']);
  * Compress images
  * 
  * @since 1.0.0
+ * @version 1.1.0
  */
 gulp.task('images', function() {
     return gulp.src('assets/images/**/*')
@@ -156,14 +141,118 @@ gulp.task('default', ['css', 'js']);
  * This includes any html changes you make so that the purgecss file will be updated.
  * 
  * @since 1.0.0
+ * @version 1.1.0
  */
 gulp.task('dev', ['css', 'js'], function() {
+    // Configure watch files.
     gulp.watch([
         'layouts/**/*.html',
         'templates/**/*.html',
         'partials/**/*.html',
-    ], ['css']);
-    gulp.watch('./tailwind.config.js', ['css']);
-    gulp.watch('./assets/styles/**/*.scss', ['css']);
-    gulp.watch('./assets/scripts/**/*.js', ['js']);
-});
+    ], ['css']).on('change', browserSync.reload);
+    gulp.watch('./tailwind.config.js', ['css']).on('change', browserSync.reload);
+    gulp.watch('./assets/styles/**/*.scss', ['css']).on('change', browserSync.reload);
+    gulp.watch('./assets/scripts/**/*.js', ['js']).on('change', browserSync.reload);
+
+    // Configure BrowserSync to run in dev
+    browserSync.init({
+        proxy: localUrl
+    });
+});
+
+/**
+ * CSS Preflight
+ * Unfortunately, it isn't possible to pass in parameters to gulp tasks.
+ * As such, we need to replicate the code.
+ *  
+ * Compile CSS [PREFLIGHT]
+ * 
+ * @since 1.0.0
+ */
+gulp.task('css:compile:preflight', function() {
+    return gulp.src('./assets/styles/app.scss')
+    .pipe(sass())
+    .pipe(postcss([
+        tailwindcss('./tailwind.config.js'),
+        purgecss({
+            content: [
+                'layouts/**/*.html',
+                'templates/**/*.html',
+                'partials/**/*.html',
+            ],
+            extractors: [
+                {
+                    extractor: TailwindExtractor,
+                    extensions: ['html', 'js', 'php', 'vue'],
+                }
+            ],
+            /**
+             * You can whitelist selectors to stop purgecss from removing them from your CSS.
+             * see: https://www.purgecss.com/whitelisting
+             * 
+             * Any selectors defined below will not be stripped from the min.css file.
+             * PurgeCSS will not purge the standard app.css file as this is useful for development.
+             * 
+             * @since 1.0.0
+             */
+            whitelist: [
+                'h2',
+                'h3',
+                'p',
+                'blockquote',
+            ],
+        })
+    ]))
+    .pipe(rename({
+        extname: '.css'
+    }))
+    .pipe(gulp.dest('css/'))
+    .pipe(notify(
+        {
+            message: 'Tailwind compiled'
+        }
+    ));
+});
+
+/**
+ * Minify the CSS [PREFLIGHT]
+ * 
+ * @since 1.0.0
+ * @version 1.1.0
+ */
+gulp.task('css:minify:preflight', ['css:compile:preflight'], function() {
+    return gulp.src([
+        './css/*.css',
+        '!./css/*.min.css'
+    ])
+    .pipe(cleanCSS())
+    .pipe(rename({
+        suffix: '.min'
+    }))
+    .pipe(gulp.dest('./css'))
+    .pipe(browserSync.stream())
+    .pipe(notify(
+        {
+            message: 'CSS minified'
+        }
+    ));
+});
+
+/**
+ * Run all CSS tasks
+ * 
+ * @since 1.0.0
+ */
+gulp.task('css:preflight', ['css:minify:preflight']);
+
+/**
+ * Preflight task
+ * Run this once you're happy with your site and you want to prep the files for production.
+ * This will run the CSS and JS functions, as well as pass the CSS through purgecss to remove any unused CSS.
+ * 
+ * Always double check that everything is still working. If something isn't displaying correctly, it may be
+ * because you need to add it to the purgeCSS whitelist.
+ * 
+ * @since 1.1.0
+ */
+gulp.task('preflight', ['css:preflight', 'js'])

layouts/default.html

@@ -5,9 +5,18 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
         <title>Document</title>
-        {{ theme:css src="app.min" tag="true" }}
+        {{ if environment == 'production' }}
+            {{ theme:css src="app.min" tag="true" }}
+        {{ else }}
+            {{ theme:css src="app" tag="true" }}
+        {{ /if }}
     </head>
     <body>
         {{ template_content }}
+        {{ if environment == 'production' }}
+            {{ theme:js src="app.min" tag="true" }}
+        {{ else }}
+            {{ theme:js src="app" tag="true" }}
+        {{ /if }}
     </body>
-</html>
+</html>

package.json

@@ -1,12 +1,13 @@
 {
   "name": "tailwindcss",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "gulpfile.js",
   "author": "Ben Furfie <hello@benfurfie.co.uk>",
   "license": "MIT",
   "private": true,
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^1.0.1",
+    "browser-sync": "^2.24.6",
     "gulp": "^3.9.1",
     "gulp-cache": "^1.0.2",
     "gulp-clean-css": "^3.9.4",