fix: remove broken Sass linting from Sass compilation task and move it to build task

Changes:
- Remove broken Sass linting from the `sass:foundation` task. The `finish` gulp event is an stream internal event and is not suitable to chain tasks.
- Add `lint:graceful`, `lint:graceful:sass` and `lint:graceful:javascript` to check for linting errors without throwing errors and breaking the chain of tasks.
- Call `lint:graceful` on the build task. For now, there is too much linting issues to display them at each Sass/Javascript compilation.

diff --git a/gulp/tasks/lint.js b/gulp/tasks/lint.js
index 2c02596bdea666189155beb2ac342c5473cdd62d..a70eb4eac67c1c23dcb3f8493b364bddaca12364 100644 (file)
--- a/gulp/tasks/lint.js
+++ b/gulp/tasks/lint.js
@@ -1,5 +1,4 @@
 var gulp = require('gulp');
-var plumber = require('gulp-plumber');
 var sassLint = require('gulp-sass-lint');
 var eslint = require('gulp-eslint');
 var CONFIG = require('../config.js');
@@ -7,22 +6,34 @@ var CONFIG = require('../config.js');
 // Lints Sass and JavaScript files for formatting issues
 gulp.task('lint', gulp.series('lint:sass', 'lint:javascript'));
 
-gulp.task('lint:sass', function() {
+// Lints Sass and Javascript without throwing error
+gulp.task('lint:graceful', gulp.series('lint:graceful:sass', 'lint:graceful:javascript'));
+
+function lintSass() {
   return gulp.src(CONFIG.SASS_LINT_FILES)
-    .pipe(plumber())
     .pipe(sassLint({
       config: './.sass-lint.yml'
     }))
-    .pipe(sassLint.format())
-    .pipe(sassLint.failOnError())
-});
+    .pipe(sassLint.format());
+}
 
-gulp.task('lint:javascript', function () {
+function lintJavascript() {
   return gulp.src(CONFIG.JS_FILES)
     .pipe(eslint({
       useEslintrc: true,
       configFile: '.eslintrc'
     }))
-    .pipe(eslint.format())
-    .pipe(eslint.failAfterError());
+    .pipe(eslint.format());
+}
+
+gulp.task('lint:sass', function () {
+  return lintSass()
+    .pipe(sassLint.failOnError());
 });
+gulp.task('lint:javascript', function () {
+  return lintJavascript()
+  .pipe(eslint.failAfterError());
+});
+
+gulp.task('lint:graceful:sass', lintSass);
+gulp.task('lint:graceful:javascript', lintJavascript);

diff --git a/gulp/tasks/sass.js b/gulp/tasks/sass.js
index 19e941d742fdab7e2ae4cb33a6b34f79db019d0a..a961e638f08d77da9fa10a03df6c7767155e2fc5 100644 (file)
--- a/gulp/tasks/sass.js
+++ b/gulp/tasks/sass.js
@@ -30,14 +30,7 @@ gulp.task('sass:foundation', gulp.series('sass:deps', function() {
     .pipe(sass().on('error', sass.logError))
     .pipe(postcss([autoprefixer()])) // uses ".browserslistrc"
     .pipe(sourcemaps.write('.'))
-    .pipe(gulp.dest('_build/assets/css'))
-    .on('finish', function() {
-      gulp.src(CONFIG.SASS_LINT_FILES)
-        .pipe(sassLint({
-            config: './.sass-lint.yml'
-          }))
-        .pipe(sassLint.format());
-    });
+    .pipe(gulp.dest('_build/assets/css'));
 }));
 
 // Compiles docs Sass (includes Foundation code also)

diff --git a/gulpfile.js b/gulpfile.js
index e8dee1bd2b12163672dfd3c0f65cdd9404c1cb7e..d751d15f37c241667cc18f969254f40b61da15ad 100644 (file)
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -15,7 +15,7 @@ function browserReloadSync(done) {
 }
 
 // Builds the documentation and framework files
-gulp.task('build', gulp.series('clean', 'copy', 'sass', 'javascript', 'docs:all'));
+gulp.task('build', gulp.series('clean', 'copy', 'sass', 'javascript', 'lint:graceful', 'docs:all'));
 
 // Starts a BrowerSync instance
 gulp.task('serve', gulp.series('build', function(done){
@@ -27,7 +27,7 @@ gulp.task('serve', gulp.series('build', function(done){
 gulp.task('watch', function() {
   gulp.watch('docs/**/*', gulp.series('docs', browserReloadSync));
   gulp.watch(['docs/layout/*.html', 'docs/partials/*{html,hbs}', 'docs/assets/partials/*{html,hbs}', 'node_modules/foundation-docs/templates/*{html,hbs}'], gulp.series('docs:all', browserReloadSync));
-  gulp.watch('scss/**/*', gulp.series('sass', browserReloadSync));
+  gulp.watch('scss/**/*', gulp.series('sass:foundation', browserReloadSync));
   gulp.watch(['docs/assets/scss/**/*', 'node_modules/foundation-docs/scss/**/*'], gulp.series('sass:docs', browserReloadSync));
   gulp.watch('js/**/*', gulp.series('javascript:foundation', browserReloadSync));
   gulp.watch(['docs/assets/js/**/*', 'node_modules/foundation-docs/js/**/*'], gulp.series('javascript:docs', browserReloadSync));