From 93be09973cbf3f3ee35d09929c7a9dbbe8b222c4 Mon Sep 17 00:00:00 2001 From: makao Date: Tue, 4 Dec 2018 01:05:54 +0100 Subject: [PATCH] Browsersync --- Readme.md | 3 +++ dev/tools/gulp/tasks/less.js | 5 +++-- dev/tools/gulp/tasks/scss.js | 5 +++-- dev/tools/gulp/tasks/watch.js | 26 ++++++++++++++++++-------- dev/tools/gulp/utils/sync.js | 24 ++++++++++++++++++++++++ dev/tools/package.json | 4 +++- 6 files changed, 54 insertions(+), 13 deletions(-) create mode 100644 dev/tools/gulp/utils/sync.js diff --git a/Readme.md b/Readme.md index 001216b..39579c7 100644 --- a/Readme.md +++ b/Readme.md @@ -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) diff --git a/dev/tools/gulp/tasks/less.js b/dev/tools/gulp/tasks/less.js index c2dc43f..1a08b09 100644 --- a/dev/tools/gulp/tasks/less.js +++ b/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/'))); } diff --git a/dev/tools/gulp/tasks/scss.js b/dev/tools/gulp/tasks/scss.js index 2b21880..932d687 100644 --- a/dev/tools/gulp/tasks/scss.js +++ b/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/'))); } diff --git a/dev/tools/gulp/tasks/watch.js b/dev/tools/gulp/tasks/watch.js index d3b1c50..37b4674 100644 --- a/dev/tools/gulp/tasks/watch.js +++ b/dev/tools/gulp/tasks/watch.js @@ -1,12 +1,16 @@ 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}`]) { @@ -14,31 +18,37 @@ function runThemeTask(task, file) { 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); }); diff --git a/dev/tools/gulp/utils/sync.js b/dev/tools/gulp/utils/sync.js new file mode 100644 index 0000000..f9567e3 --- /dev/null +++ b/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()); +} diff --git a/dev/tools/package.json b/dev/tools/package.json index d3130a6..4c50fe5 100644 --- a/dev/tools/package.json +++ b/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" } }