Merge 4454b7f into 62417ee

.travis.yml

@@ -3,6 +3,7 @@ language: php
 php:
 - 7.0
 - 7.1
+- 7.2
 
 install:
 - echo "{\"http-basic\":{\"repo.magento.com\":{\"username\":\"${MAGENTO_USERNAME}\",\"password\":\"${MAGENTO_PASSWORD}\"}}}" > auth.json

Readme.md

@@ -1,5 +1,5 @@
-![Packagist](https://img.shields.io/packagist/v/clawrock/magento2-sass-preprocessor.svg)
-![Packagist](https://img.shields.io/packagist/dt/clawrock/magento2-sass-preprocessor.svg)
+[![Packagist](https://img.shields.io/packagist/v/clawrock/magento2-sass-preprocessor.svg)](https://packagist.org/packages/clawrock/magento2-sass-preprocessor)
+[![Packagist](https://img.shields.io/packagist/dt/clawrock/magento2-sass-preprocessor.svg)](https://packagist.org/packages/clawrock/magento2-sass-preprocessor)
 [![Build Status](https://travis-ci.org/clawrock/magento2-sass-preprocessor.svg?branch=master)](https://travis-ci.org/clawrock/magento2-sass-preprocessor)
 [![Coverage Status](https://coveralls.io/repos/github/clawrock/magento2-sass-preprocessor/badge.svg)](https://coveralls.io/github/clawrock/magento2-sass-preprocessor)
 
@@ -12,8 +12,8 @@ Module for Sass processing during static content deployment with additional Gulp
 3. Compile Sass theme using `php bin/magento setup:static-content:deploy -f`
 
 ## Compatibility
-* Magento 2.2
-* PHP 7.0 - 7.1
+* Magento 2.2 - 2.3
+* PHP 7.0 - 7.2
 * Gulp 3.9
 * Node.js v8 or later
 
@@ -26,6 +26,9 @@ Module for Sass processing during static content deployment with additional Gulp
 6. Compile Scss `gulp scss:[theme_key]`
 7. Watch for changes `gulp watch:[theme_key]`
 
+## Browsersync
+Pass `--proxy http://magento.test` argument to `gulp watch` or `gulp watch:[theme_key]` where http://magento.test is Magento base url and Browsersync will be automatically enabled.
+
 ## Compatible themes
 * [clawrock/magento2-theme-blank-sass](https://github.com/clawrock/magento2-theme-blank-sass)
 

composer.json

@@ -2,10 +2,10 @@
     "name": "clawrock/magento2-sass-preprocessor",
     "description": "Module for Sass processing during static content deployment",
     "require": {
-        "magento/framework": "~101.0",
+        "magento/framework": "~101.0|~102.0",
         "leafo/scssphp": "^0.7.7",
         "magento/module-developer": "^100.2",
-        "magento/module-store": "^100.2"
+        "magento/module-store": "^100.2|^101.0"
     },
     "type": "magento2-module",
     "license": [

dev/tools/gulp/tasks/less.js

@@ -3,6 +3,7 @@ import ThemeRegistry from '../utils/theme-registry';
 import less from 'gulp-less';
 import sourceMaps from 'gulp-sourcemaps';
 import util from 'gulp-util';
+import { sync } from '../utils/sync';
 
 export default function (done, theme) {
     const themeRegistry = new ThemeRegistry();
@@ -11,9 +12,9 @@ export default function (done, theme) {
         throw new Error('Please specify theme after colon.');
     }
 
-    return gulp.src(themeConfig.preprocessorFiles)
+    return sync(gulp.src(themeConfig.preprocessorFiles)
         .pipe(sourceMaps.init())
         .pipe(less().on('error', util.log))
         .pipe(sourceMaps.write('.'))
-        .pipe(gulp.dest(themeConfig.path + 'css/'));
+        .pipe(gulp.dest(themeConfig.path + 'css/')));
 }

dev/tools/gulp/tasks/scss.js

@@ -2,6 +2,7 @@ import gulp from 'gulp';
 import sass from 'gulp-sass';
 import sourceMaps from 'gulp-sourcemaps';
 import ThemeRegistry from '../utils/theme-registry';
+import { sync } from '../utils/sync';
 
 export default function (done, theme) {
     const themeRegistry = new ThemeRegistry();
@@ -10,9 +11,9 @@ export default function (done, theme) {
         throw new Error('Please specify theme after colon.');
     }
 
-    return gulp.src(themeConfig.preprocessorFiles)
+    return sync(gulp.src(themeConfig.preprocessorFiles)
         .pipe(sourceMaps.init())
         .pipe(sass().on('error', sass.logError))
         .pipe(sourceMaps.write('.'))
-        .pipe(gulp.dest(themeConfig.path + 'css/'));
+        .pipe(gulp.dest(themeConfig.path + 'css/')));
 }

dev/tools/gulp/tasks/watch.js

@@ -1,44 +1,54 @@
 import gulp from 'gulp';
 import ThemeRegistry from '../utils/theme-registry';
 import config from '../config';
+import { initSync } from '../utils/sync';
+import path from 'path';
+import gutil from 'gulp-util';
+import chalk from 'chalk';
 
 function runThemeTask(task, file) {
     const themeRegistry = new ThemeRegistry();
     const theme = themeRegistry.getThemeKeyByFile(file);
     if (!theme) {
-        console.error(`Theme task not found for this file!`);
+        gutil.log(chalk.red(`Theme task not found for this file!`));
     }
 
     if (gulp.tasks[`${task}:${theme}`]) {
         gulp.start(`${task}:${theme}`);
 
         return;
     }
-    console.error(`Task ${task}:${theme} not found!`);
+    gutil.log(chalk.red(`Task ${task}:${theme} not found!`));
+}
+
+function relativizePath(absolutePath) {
+    return path.relative(process.cwd(), absolutePath);
 }
 
 export default function (done, theme) {
-    const path = `${config.projectPath}/pub/static`;
+    const pubPath = `${config.projectPath}/pub/static`;
+
+    initSync();
 
     if (theme) {
         const themeRegistry = new ThemeRegistry();
         const themeConfig = themeRegistry.getTheme(theme);
         gulp.watch(`${themeConfig.path}**/*.${themeConfig.dsl}`, [`${themeConfig.dsl}:${theme}`]).on('change', stream => {
-            console.log(`File ${stream.path} was changed`);
+            gutil.log(chalk.white(`File ${relativizePath(stream.path)} was changed`));
         });
 
         return;
     }
 
-    gulp.watch(`${path}/**/*.less`).on('change', stream => {
-        console.log(`File ${stream.path} was changed`);
+    gulp.watch(`${pubPath}/**/*.less`).on('change', stream => {
+        gutil.log(chalk.white(`File ${relativizePath(stream.path)} was changed`));
 
         runThemeTask(`less`, stream.path);
 
     });
 
-    gulp.watch(`${path}/**/*.scss`).on('change', stream => {
-        console.log(`File ${stream.path} was changed`);
+    gulp.watch(`${pubPath}/**/*.scss`).on('change', stream => {
+        gutil.log(chalk.white(`File ${relativizePath(stream.path)} was changed`));
 
         runThemeTask(`scss`, stream.path);
     });

dev/tools/gulp/utils/sync.js

@@ -0,0 +1,24 @@
+import browserSync from 'browser-sync';
+import gutil from 'gulp-util';
+import chalk from 'chalk';
+import { argv } from 'yargs';
+
+const bs = browserSync.create('magento2');
+
+export function initSync(options = {}) {
+    if (!argv.proxy) {
+        gutil.log(chalk.yellow('BrowserSync is disabled, please specify proxy argument.'));
+
+        return;
+    }
+
+    const config = Object.assign(options, {
+        proxy: argv.proxy
+    });
+
+    bs.init(config);
+}
+
+export function sync(stream) {
+    return stream.pipe(bs.stream());
+}

dev/tools/package.json

@@ -16,10 +16,12 @@
     "@babel/preset-env": "^7.0.0",
     "babel-core": "^6.26.3",
     "babel-preset-env": "^1.7.0",
+    "browser-sync": "^2.26.3",
     "gulp": "^3.9.1",
     "gulp-less": "^4.0.1",
     "gulp-rimraf": "^0.2.2",
     "gulp-sass": "^4.0.1",
-    "gulp-sourcemaps": "^2.6.4"
+    "gulp-sourcemaps": "^2.6.4",
+    "yargs": "^12.0.5"
   }
 }