Modules and maintenance

- Update to modules
- Added ESLint configuration
- Tried to fix SASS but still no automatic reload
- Gulp not working anymore

.eslintrc.js

@@ -0,0 +1,27 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es6": true,
+        "node": true
+    },
+    "extends": "eslint:recommended",
+    "rules": {
+        "indent": [
+            "error",
+            2
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+};

gulp/config.js

@@ -20,6 +20,6 @@ const config = {
     titlePrefix: ' - HIPPIE',
     pageBase: './'
   }
-}
+};
 
 module.exports = config;

gulp/tasks/sync.js

@@ -1,9 +1,10 @@
 const config = require('../config');
-const browserSync = require('browser-sync'), server = browserSync.create();
+// const browserSync = require('browser-sync'), server = browserSync.create();
+const server = require('browser-sync').create();
 
 // Automagically reload browsers
 function reload(done) {
-  server.reload();
+  server.reload;
 
   done();
 }
@@ -21,5 +22,5 @@ function serve(done) {
 
 module.exports = {
   serve: serve,
-  reload: reload,
+  reload: reload
 };

gulpfile.js

@@ -28,7 +28,7 @@ const cleanCss = require('gulp-clean-css');
 const pump = require('pump');
 const cached = require('gulp-cached');
 // const remember = require('gulp-remember');
-const concat = require('gulp-concat');
+// const concat = require('gulp-concat');
 const uglify = require('gulp-uglify');
 const jshint = require('gulp-jshint');
 const gulpIf = require('gulp-if');
@@ -61,7 +61,7 @@ const input = {
     sprites: config.src + 'art/sprites/**/*.png',
     images: config.src + 'art/images/**/*.+(png|gif|jpg|svg|webp)'
   },
-  vendor: 'vendor/**/*',
+  vendor: 'vendor/**/*'
 };
 
 const output = {
@@ -132,7 +132,8 @@ function nunjucks() {
 function style() {
   return src(input.style)
     .pipe(plumber())
-    .pipe(sass.sync({
+    // .pipe(sass.sync({
+    .pipe(sass({
       includePaths: [input.vendor + '/**/*.s+(a|c)ss']
     }).on('error', sass.logError))
     .pipe(autoprefixer(['>= 4%', 'last 2 version']))
@@ -184,7 +185,7 @@ function code(cb) {
     rename({
       suffix: '.min'
     }),
-    dest(output.code, { sourcemaps: '.' }),
+    dest(output.code, { sourcemaps: '.' })
   ], cb);
 }
 
@@ -204,7 +205,7 @@ function codeLint() {
 function fonts() {
   return src(input.fonts)
     .pipe(plumber())
-    .pipe(dest(output.fonts))
+    .pipe(dest(output.fonts));
 }
 
 // Add art
@@ -213,7 +214,7 @@ function art() {
   let favicons = src(input.art.favicons)
     .pipe(plumber())
     .pipe(changed(output.art))
-    .pipe(dest(config.dev))
+    .pipe(dest(config.dev));
 
   // Move images to the root folder
   let images = src(input.art.images)
@@ -221,7 +222,7 @@ function art() {
     .pipe(changed(output.art))
     .pipe(dest(output.art));
 
-  return merge(favicons, images)
+  return merge(favicons, images);
 }
 // function art() {
 //   // Move favicons and images to the root folder
@@ -262,7 +263,7 @@ function sprites() {
 function vendor() {
   return src(input.vendor)
     .pipe(plumber())
-    .pipe(dest(output.vendor))
+    .pipe(dest(output.vendor));
 }
 
 // TODO for distribution

package.json

@@ -22,8 +22,8 @@
   "devDependencies": {
     "@babel/core": "~7",
     "@babel/preset-env": "~7",
-    "browser-sync": "^2.27.7",
-    "del": "^6.0.0",
+    "browser-sync": "^2.27.10",
+    "del": "^7.0.0",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^8.0.0",
     "gulp-babel": "~8.0",
@@ -44,11 +44,11 @@
     "gulp-sass-lint": "^1.4.0",
     "gulp-uglify": "^3.0.2",
     "gulp-useref": "^5.0.0",
-    "gulp.spritesmith": "^6.12.1",
+    "gulp.spritesmith": "^6.13.0",
     "jshint": "~2",
     "jshint-stylish": "^2.2.1",
     "merge-stream": "^2.0.0",
     "pump": "^3.0.0",
-    "sass": "^1.49.7"
+    "sass": "^1.54.0"
   }
 }

source/style/modules/demo/_demo_module.scss

@@ -180,31 +180,31 @@
 }
 
 .demo__query_example {
-	@include goingLarge($screen_tiny/1px) {background-color: $alpha_color; }
-	@include goingLarge($screen_small/1px) {background-color: $bravo_color; }
-	@include goingLarge($screen_medium/1px) {background-color: $charlie_color; }
-	@include goingLarge($screen_large/1px) {background-color: $delta_color; }
-	@include goingLarge($screen_huge/1px) {background-color: $echo_color; }
-	@include goingLarge($screen_gigantic/1px) {background-color: $foxtrot_color; }
+	@include goingLarge($screen_tiny * 1px) {background-color: $alpha_color; }
+	@include goingLarge($screen_small * 1px) {background-color: $bravo_color; }
+	@include goingLarge($screen_medium * 1px) {background-color: $charlie_color; }
+	@include goingLarge($screen_large * 1px) {background-color: $delta_color; }
+	@include goingLarge($screen_huge * 1px) {background-color: $echo_color; }
+	@include goingLarge($screen_gigantic * 1px) {background-color: $foxtrot_color; }
 	margin-bottom: $space_small;
 	padding: $space_small;
 	text-align: center;
 
 	&:after {
 		@extend code;
-		@include goingLarge($screen_tiny/1px) {
+		@include goingLarge($screen_tiny * 1px) {
 			& { content: '768px'; }
 		}
-		@include goingLarge($screen_small/1px) {
+		@include goingLarge($screen_small * 1px) {
 			& { content: '1024px'; }
 		}
-		@include goingLarge($screen_medium/1px) {
+		@include goingLarge($screen_medium * 1px) {
 			& { content: '1280px'; }
 		}
-		@include goingLarge($screen_huge/1px) {
+		@include goingLarge($screen_huge * 1px) {
 			& { content: '1680px'; }
 		}
-		@include goingLarge($screen_gigantic/1px) {
+		@include goingLarge($screen_gigantic * 1px) {
 			& { content: '1920px'; }
 		}
 		content: '< 768px';