Merged release/1.1.0 into master

.travis.yml

@@ -2,9 +2,9 @@ language: node_js
 node_js: 6
 cache:
   directories:
-  - test/node_modules
+  - __test__/node_modules
 install:
-  - cd test
+  - cd __test__
   - npm install -g gulp-cli
   - npm install
 script:

README.md

@@ -46,31 +46,33 @@ First of all check `config/themes.json.sample`
 ## Tasks list
 * `browser-sync` - run [browserSync](https://www.browsersync.io/)- do not run this task separately, it's just a part of `dev` task
 * `clean` - Removes `/pub/static` folder
+* `csslint` - Run [stylelint](https://github.com/stylelint/stylelint) based tests
+  * `--theme name` - Process single theme
+  * `--ci - Enable throwing errors, useful in CI/CD pipelines`
 * `default` - type `gulp` to see this readme in console
 * `deploy` - Resolve theme inheritance of static assets (i.e. fonts, images) symlinking them to `pub` dir.
   * `--theme name` - Deploy single theme
   * `--prod` - Copy files instead of making symlinks
 * `dev` - Runs `browser-sync`, `inheritance` and `watch`  tasks
   * `--theme name` - Process single theme
-  * `--maps` - Toggles source maps generation
+  * `--disableLinting` - Disable SASS and CSS linting
+  * `--disableMaps` - Toggles source maps generation
   * `--prod` - Production output - minifies styles
 * `eslint` - Watch and run [eslint](https://github.com/adametry/gulp-eslint) on specified JS file
   * `--file fileName` - You have to specify what file you want to lint, fileName without .js
+* `inheritance` - Create necessary symlinks to resolve theme styles inheritance and make base for styles processing. You have to run in before sytles compilation and after adding new files.
 * `release` - Clean `pub/static`, deploy all necessary files and compiles everything with `--prod` flag. Makes code production ready.
+* `sasslint` - Run [sass-lint](https://github.com/sasstools/sass-lint) based tests
+  * `--theme name` - Process single theme
+  * `--ci - Enable throwing errors, useful in CI/CD pipelines`
 * `setup` - Creates a convenient symlink from `/tools` to `/vendor/snowdog/frontools` and copies all sample files if no configuration exists
   * `--symlink name` - if you don't want to use `tools` as the symlink you can specify another name
 * `styles` - Use this task to manually trigger styles processing pipeline
   * `--theme name` - Process single theme
-  * `--maps` - Toggles source maps generation
+  * `--disableMaps` - Toggles source maps generation
   * `--prod` - Production output - minifies styles
 * `watch` - Watch for style changes and run processing tasks
   * `--theme name` - Process single theme
-  * `--maps` - Enable inline source maps generation
+  * `--disableLinting` - Disable SASS and CSS linting
+  * `--disableMaps` - Enable inline source maps generation
   * `--prod` - Production output - minifies styles
-* `csslint` - Run [stylelint](https://github.com/stylelint/stylelint) based tests
-  * `--theme name` - Process single theme
-  * `--ci - Enable throwing errors, useful in CI/CD pipelines`
-* `sasslint` - Run [sass-lint](https://github.com/sasstools/sass-lint) based tests
-  * `--theme name` - Process single theme
-  * `--ci - Enable throwing errors, useful in CI/CD pipelines`
-* `inheritance` - Create necessary symlinks to resolve theme styles inheritance and make base for styles processing. You have to run in before sytles compilation and after adding new files.

composer.json

@@ -1,7 +1,7 @@
 {
     "name": "snowdog/frontools",
     "description": "Set of front-end tools for Magento 2, based on Gulp.js",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "license": "MIT",
     "type": "magento2-component"
 }

gulpfile.js

@@ -1,7 +1,6 @@
 'use strict';
 // Plugins / Functions / Modules
-const gulp    = require('gulp'),
-      plugins = require('gulp-load-plugins')({
+const plugins = require('gulp-load-plugins')({
         pattern: ['*', '!gulp', '!gulp-load-plugins'],
         rename : {
           'browser-sync'    : 'browserSync',
@@ -27,13 +26,3 @@ require('gulp-task-loader')({
   plugins: plugins,
   configs: config
 });
-
-// Define task for each theme
-// Gulp can't run same task in parallel, so we need different names
-Object.keys(config.themes).forEach(name => {
-  const theme = config.themes[name];
-  gulp.task(
-    theme.lang + ':' + name,
-    require('./helper/' + theme.lang)(gulp, plugins, config, name)
-  );
-});

helper/css-lint.js

@@ -0,0 +1,26 @@
+'use strict';
+module.exports = function(gulp, plugins, config, name, file) { // eslint-disable-line func-names
+  // Return function that is executed inside of .pipe()
+  return () => {
+    const theme           = config.themes[name],
+          srcBase         = config.projectPath + theme.dest,
+          stylelintConfig = require('../helper/config-loader')('stylelint.yml', plugins, config);
+
+    return gulp.src(file || srcBase + '/**/*.css')
+      .pipe(plugins.plumber({ errorHandler: plugins.notify.onError('Error: <%= error.message %>') }))
+      .pipe(plugins.postcss([
+        plugins.stylelint({
+          config: stylelintConfig
+        }),
+        plugins.reporter({
+          clearMessages: true,
+          throwError: plugins.util.env.ci || false
+        })
+      ]))
+      .pipe(plugins.logger({
+        display   : 'name',
+        beforeEach: 'Theme: ' + name + ' ' + 'File: ',
+        afterEach : ' - CSS Lint finished.'
+      }));
+  }
+};

helper/sass-lint.js

@@ -0,0 +1,20 @@
+'use strict';
+module.exports = function(gulp, plugins, config, name, file) { // eslint-disable-line func-names
+  // Return function that is executed inside of .pipe()
+  return () => {
+    const theme          = config.themes[name],
+          srcBase        = config.projectPath + 'var/view_preprocessed/frontools' + theme.dest.replace('pub/static', ''),
+          sassLintConfig = require('../helper/config-loader')('sass-lint.yml', plugins, config);
+
+    return gulp.src(file || srcBase + '/**/*.scss')
+      .pipe(plugins.plumber({ errorHandler: plugins.notify.onError('Error: <%= error.message %>') }))
+      .pipe(plugins.sassLint(sassLintConfig))
+      .pipe(plugins.sassLint.format())
+      .pipe(plugins.if(plugins.util.env.ci, plugins.sassLint.failOnError()))
+      .pipe(plugins.logger({
+        display   : 'name',
+        beforeEach: 'Theme: ' + name + ' ' + 'File: ',
+        afterEach : ' - SASS Lint finished.'
+      }));
+  }
+};

helper/scss.js

@@ -1,12 +1,12 @@
 'use strict';
-module.exports = function(gulp, plugins, config, name, file) { // eslint-disable-line func-names
+module.exports = function(gulp, plugins, config, name, file, locale) { // eslint-disable-line func-names
   // Return function that is executed inside of .pipe()
   return () => {
-    const theme      = config.themes[name],
-          srcBase    = config.projectPath + 'var/view_preprocessed/frontools' + theme.dest.replace('pub/static', ''),
-          maps       = plugins.util.env.maps || false,
-          production = plugins.util.env.prod || false,
-          postcss    = [];
+    const theme       = config.themes[name],
+          srcBase     = config.projectPath + 'var/view_preprocessed/frontools' + theme.dest.replace('pub/static', ''),
+          disableMaps = plugins.util.env.disableMaps || false,
+          production  = plugins.util.env.prod || false,
+          postcss     = [];
 
     if (theme.postcss) {
       theme.postcss.forEach(el => {
@@ -24,11 +24,11 @@ module.exports = function(gulp, plugins, config, name, file) { // eslint-disable
           { base: srcBase + '/styles' }
         )
         .pipe(plugins.plumber({ errorHandler: plugins.notify.onError('Error: <%= error.message %>') }))
-        .pipe(plugins.if(maps, plugins.sourcemaps.init()))
+        .pipe(plugins.if(!disableMaps, plugins.sourcemaps.init()))
         .pipe(plugins.sass())
         .pipe(plugins.if(production, plugins.postcss([plugins.cssnano()])))
         .pipe(plugins.if(postcss.length, plugins.postcss(postcss || [])))
-        .pipe(plugins.if(maps, plugins.sourcemaps.write()))
+        .pipe(plugins.if(!disableMaps, plugins.sourcemaps.write()))
         .pipe(plugins.multiDest(dest))
         .pipe(plugins.logger({
           display   : 'name',
@@ -38,25 +38,43 @@ module.exports = function(gulp, plugins, config, name, file) { // eslint-disable
         .pipe(plugins.browserSync.stream());
     }
     else {
-      theme.locale.forEach(locale => {
-        return gulp.src(
-            file || srcBase + '/' + locale + '/**/*.scss',
-            { base: srcBase + '/' + locale + '/styles' }
-          )
+      if (file) {
+        return gulp.src(file, { base: srcBase + '/' + locale + '/styles' })
           .pipe(plugins.plumber({ errorHandler: plugins.notify.onError('Error: <%= error.message %>') }))
-          .pipe(plugins.if(maps, plugins.sourcemaps.init()))
+          .pipe(plugins.if(!disableMaps, plugins.sourcemaps.init()))
           .pipe(plugins.sass())
           .pipe(plugins.if(production, plugins.postcss([plugins.cssnano()])))
           .pipe(plugins.if(postcss.length, plugins.postcss(postcss || [])))
-          .pipe(plugins.if(maps, plugins.sourcemaps.write()))
+          .pipe(plugins.if(!disableMaps, plugins.sourcemaps.write()))
           .pipe(gulp.dest(config.projectPath + theme.dest + '/' + locale + '/css'))
           .pipe(plugins.logger({
             display   : 'name',
             beforeEach: 'Theme: ' + name + ' Locale: ' + locale + ' ',
             afterEach : ' Compiled!'
           }))
           .pipe(plugins.browserSync.stream());
-      });
+      }
+      else {
+        theme.locale.forEach(locale => {
+          return gulp.src(
+              file || srcBase + '/' + locale + '/**/*.scss',
+              { base: srcBase + '/' + locale + '/styles' }
+            )
+            .pipe(plugins.plumber({ errorHandler: plugins.notify.onError('Error: <%= error.message %>') }))
+            .pipe(plugins.if(!disableMaps, plugins.sourcemaps.init()))
+            .pipe(plugins.sass())
+            .pipe(plugins.if(production, plugins.postcss([plugins.cssnano()])))
+            .pipe(plugins.if(postcss.length, plugins.postcss(postcss || [])))
+            .pipe(plugins.if(!disableMaps, plugins.sourcemaps.write()))
+            .pipe(gulp.dest(config.projectPath + theme.dest + '/' + locale + '/css'))
+            .pipe(plugins.logger({
+              // display   : 'name',
+              beforeEach: 'Theme: ' + name + ' Locale: ' + locale + ' ',
+              afterEach : ' Compiled!'
+            }))
+            .pipe(plugins.browserSync.stream());
+        });
+      }
     }
   }
 };