From 04321ae86b14f52c426a836a630db4bbec0d84b5 Mon Sep 17 00:00:00 2001 From: HOG Date: Fri, 22 Sep 2017 13:54:38 +0300 Subject: [PATCH 1/3] #38 Fixed watch & browsersync gulp tasks. --- STARTERKIT/gulpfile.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/STARTERKIT/gulpfile.js b/STARTERKIT/gulpfile.js index d816c58..cb39991 100644 --- a/STARTERKIT/gulpfile.js +++ b/STARTERKIT/gulpfile.js @@ -42,7 +42,7 @@ options.theme = { // Set the URL used to access the Drupal website under development. This will // allow Browser Sync to serve the website and update CSS changes on the fly. -options.drupalURL = ''; +options.drupalURL = 'd8.loc'; // Converts module names to absolute paths for easy imports. function sassModuleImporter(url, file, done) { @@ -134,7 +134,7 @@ var gulp = require('gulp'), gulp.task('default', ['build']); // Build everything. -gulp.task('build', ['styles', 'styleguide', 'lint']); +gulp.task('build', ['clean:css', 'styles', 'styleguide', 'lint']); // Build CSS. var sassFiles = [ @@ -145,7 +145,7 @@ var sassFiles = [ '!' + options.theme.components + 'style-guide/kss-example-chroma.scss' ]; -gulp.task('styles', ['clean:css'], function () { +gulp.task('styles', function () { return gulp.src(sassFiles) .pipe($.if(!isProduction, $.sourcemaps.init())) .pipe($.if(!isProduction, cache())) @@ -205,13 +205,14 @@ gulp.task('browser-sync', ['watch:css'], function () { return Promise.resolve(); } return browserSync.init({ - proxy: options.drupalURL, - noOpen: false + proxy: options.drupalURL }); }); -gulp.task('watch:css', ['clean:css', 'styles'], function () { - return gulp.watch(options.theme.components + '**/*.scss', options.gulpWatchOptions, ['styles']); +var watchCss = gulp.watch(sassFiles, options.gulpWatchOptions, ['styles']); +gulp.task('watch:css', function () { + gulp.watch(options.theme.css + '**/*.css').on('change', browserSync.reload); + return watchCss }); gulp.task('watch:lint-and-styleguide', ['styleguide', 'lint:sass'], function () { From 3b8bb1ae36feeb8249f812253352d9c2a531da9a Mon Sep 17 00:00:00 2001 From: iberdinsky Date: Sun, 26 Nov 2017 01:05:24 +0600 Subject: [PATCH 2/3] Fixed watch/browsersync. --- STARTERKIT/.sass-lint.yml | 2 +- STARTERKIT/gulpfile.js | 180 +++++++++++++++++++++----------------- STARTERKIT/package.json | 10 ++- 3 files changed, 106 insertions(+), 86 deletions(-) diff --git a/STARTERKIT/.sass-lint.yml b/STARTERKIT/.sass-lint.yml index a462800..2ba2c5c 100644 --- a/STARTERKIT/.sass-lint.yml +++ b/STARTERKIT/.sass-lint.yml @@ -36,7 +36,7 @@ rules: # no-css-comments: 2 no-debug: 2 # no-duplicate-properties: 2 - no-empty-rulesets: 2 + no-empty-rulesets: 1 no-extends: 0 # no-ids: 2 # no-important: 2 diff --git a/STARTERKIT/gulpfile.js b/STARTERKIT/gulpfile.js index cb39991..561e2f2 100644 --- a/STARTERKIT/gulpfile.js +++ b/STARTERKIT/gulpfile.js @@ -10,9 +10,17 @@ 'use strict'; -var importOnce = require('node-sass-import-once'), - path = require('path'), - glob = require('glob'), +// Load Gulp and tools we will use. +// Task gulp-load-plugins will report "undefined" error unless you load +// gulp-sass manually. +// Pattern allows to lazy-load modules on demand. +var $ = require('gulp-load-plugins')({ + overridePattern: false, + pattern: '*' + }), + browserSync = $.browserSync.create(), + gulp = require('gulp'), + env = process.env.NODE_ENV || 'testing', isProduction = (env === 'production'); @@ -42,26 +50,14 @@ options.theme = { // Set the URL used to access the Drupal website under development. This will // allow Browser Sync to serve the website and update CSS changes on the fly. -options.drupalURL = 'd8.loc'; - -// Converts module names to absolute paths for easy imports. -function sassModuleImporter(url, file, done) { - try { - let pathResolution = require.resolve(url); - return done({ - file: pathResolution - }); - } - catch (e) { - return null; - } -} +options.drupalURL = ''; // Define the node-sass configuration. The includePaths is critical! options.sass = { - importer: [sassModuleImporter, importOnce], + importer: [sassModuleImporter, $.nodeSassImportOnce], includePaths: [options.theme.components, options.theme.node], - outputStyle: (isProduction ? 'compresssed' : 'expanded') + outputStyle: (isProduction ? 'compresssed' : 'expanded'), + errLogToConsole: true }; // Define which browsers to add vendor prefixes for. @@ -72,15 +68,6 @@ options.autoprefixer = { ] }; -// Help KSS to automatically find new component CSS files. -var cssFiles = glob.sync('*.css', {cwd: options.theme.css}), - cssStyleguide = []; - -cssFiles.forEach(function (file) { - file = path.relative(options.rootPath.styleGuide, options.theme.css) + '/' + file; - cssStyleguide.push(file); -}); - // Define the style guide paths and options. options.styleGuide = { source: [ @@ -95,9 +82,8 @@ options.styleGuide = { // The css and js paths are URLs, like '/misc/jquery.js'. // The following paths are relative to the generated style guide. - css: cssStyleguide, - js: [ - ], + css: [], + js: [], homepage: 'homepage.md', title: 'STARTERKIT Style Guide' @@ -119,53 +105,42 @@ options.eslint = { // Use `options.gulpWatchOptions = {interval: 1000, mode: 'poll'};` as example. options.gulpWatchOptions = {}; -// Load Gulp and tools we will use. -// Task gulp-load-plugins will report "undefined" error unless you load -// gulp-sass manually. -var gulp = require('gulp'), - $ = require('gulp-load-plugins')(), - browserSync = require('browser-sync').create(), - del = require('del'), - sass = require('gulp-sass'), - kss = require('kss'), - cache = require('gulp-cached'); +// Browsersync options +options.browserSync = { + proxy: { + target: options.drupalURL + }, + xip: true +}; // The default task. gulp.task('default', ['build']); // Build everything. -gulp.task('build', ['clean:css', 'styles', 'styleguide', 'lint']); - -// Build CSS. -var sassFiles = [ - options.theme.components + '**/*.scss', - // Do not open Sass partials as they will be included as needed. - '!' + options.theme.components + '**/_*.scss', - // Chroma markup has its own gulp task. - '!' + options.theme.components + 'style-guide/kss-example-chroma.scss' -]; +gulp.task('build', ['clean', 'lint', 'styleguide']); +// Styles, sourcemaps, autoprefixer gulp.task('styles', function () { - return gulp.src(sassFiles) + return gulp.src(options.theme.components + '**/*.scss') + .pipe($.sassGlob()) .pipe($.if(!isProduction, $.sourcemaps.init())) - .pipe($.if(!isProduction, cache())) - .pipe(sass(options.sass).on('error', sass.logError)) - .pipe($.autoprefixer(options.autoprefixer)) + .pipe($.sass(options.sass)).on('error', $.sass.logError) .pipe($.rename({dirname: ''})) - .pipe($.size({showFiles: true})) + .pipe($.autoprefixer(options.autoprefixer)) .pipe($.if(!isProduction, $.sourcemaps.write('./'))) .pipe(gulp.dest(options.theme.css)) - .pipe($.if(browserSync.active, browserSync.stream({match: '**/*.css'}))); + .pipe(browserSync.stream({match: '**/*.css'})); }); // Build style guide. -gulp.task('styleguide', ['clean:styleguide', 'styleguide:kss-example-chroma'], function () { - return kss(options.styleGuide); +gulp.task('styleguide', ['styles', 'styleguide:kss-example-chroma'], function () { + options.styleGuide.css = getCss(); + return $.kss(options.styleGuide); }); gulp.task('styleguide:kss-example-chroma', function () { return gulp.src(options.theme.components + 'style-guide/kss-example-chroma.scss') - .pipe(sass(options.sass).on('error', sass.logError)) + .pipe($.sass(options.sass).on('error', $.sass.logError)) .pipe($.replace(/(\/\*|\*\/)\n/g, '')) .pipe($.rename('kss-example-chroma.twig')) .pipe($.size({showFiles: true})) @@ -175,7 +150,7 @@ gulp.task('styleguide:kss-example-chroma', function () { // Debug the generation of the style guide with the --verbose flag. gulp.task('styleguide:debug', ['clean:styleguide', 'styleguide:kss-example-chroma'], function () { options.styleGuide.verbose = true; - return kss(options.styleGuide); + return $.kss(options.styleGuide); }); // Lint Sass and JavaScript. @@ -198,41 +173,57 @@ gulp.task('lint:sass', function () { }); // Watch for changes and rebuild. -gulp.task('watch', ['browser-sync', 'watch:lint-and-styleguide', 'watch:js']); - -gulp.task('browser-sync', ['watch:css'], function () { - if (!options.drupalURL) { - return Promise.resolve(); - } - return browserSync.init({ - proxy: options.drupalURL +gulp.task('watch', ['watch:sass', 'watch:js']); + +gulp.task('watch:sass', function () { + return gulp.watch(options.theme.components + '**/*.scss', options.gulpWatchOptions, function () { + $.runSequence( + 'styles', + 'lint:sass', + 'browser-sync:reload' + ); }); }); -var watchCss = gulp.watch(sassFiles, options.gulpWatchOptions, ['styles']); -gulp.task('watch:css', function () { - gulp.watch(options.theme.css + '**/*.css').on('change', browserSync.reload); - return watchCss -}); - -gulp.task('watch:lint-and-styleguide', ['styleguide', 'lint:sass'], function () { +gulp.task('watch:styleguide', function () { return gulp.watch([ - options.theme.components + '**/*.scss', options.theme.components + '**/*.twig' - ], options.gulpWatchOptions, ['styleguide', 'lint:sass']); + ], + options.gulpWatchOptions, + function () { + $.runSequence( + 'styleguide' + ); + } + ); +}); + +gulp.task('watch:js', function () { + return gulp.watch(options.eslint.files, options.gulpWatchOptions, function () { + $.runSequence( + 'lint:js' + // Minify and concat/webpack + ); + }); +}); + +gulp.task('browser-sync', function () { + browserSync.init(options.browserSync); }); -gulp.task('watch:js', ['lint:js'], function () { - return gulp.watch(options.eslint.files, options.gulpWatchOptions, ['lint:js']); +gulp.task('browser-sync:reload', function () { + browserSync.reload(); }); +gulp.task('serve', ['build', 'browser-sync', 'watch']); + // Clean all directories. gulp.task('clean', ['clean:css', 'clean:styleguide']); // Clean style guide files. gulp.task('clean:styleguide', function () { // You can use multiple globbing patterns as you would with `gulp.src`. - return del([ + return $.del([ options.styleGuide.destination + '*.html', options.styleGuide.destination + 'kss-assets', options.theme.build + 'twig/*.twig' @@ -241,12 +232,37 @@ gulp.task('clean:styleguide', function () { // Clean CSS files. gulp.task('clean:css', function () { - return del([ + return $.del([ options.theme.css + '**/*.css', options.theme.css + '**/*.map' ], {force: true}); }); +// Converts module names to absolute paths for easy imports. +function sassModuleImporter(url, file, done) { + try { + let pathResolution = require.resolve(url); + return done({ + file: pathResolution + }); + } + catch (e) { + return null; + } +} + +// Get new css files for kss-node. +function getCss() { + // Help KSS to automatically find new component CSS files. + var cssFiles = $.glob.sync('*.css', {cwd: options.theme.css}), + cssStyleguide = []; + + cssFiles.forEach(function (file) { + file = $.path.relative(options.rootPath.styleGuide, options.theme.css) + '/' + file; + cssStyleguide.push(file); + }); + return cssStyleguide; +} // Resources used to create this gulpfile.js: // - https://github.com/google/web-starter-kit/blob/master/gulpfile.babel.js diff --git a/STARTERKIT/package.json b/STARTERKIT/package.json index 68a6d55..9989ddf 100644 --- a/STARTERKIT/package.json +++ b/STARTERKIT/package.json @@ -9,7 +9,7 @@ "browser-sync": "^2.12.3", "chroma-sass": "^1.2.4", "del": "^2.2.0", - "eslint": "^2.9.0", + "glob": "^7.1.2", "gulp": "^3.9.1", "gulp-autoprefixer": "^3.1.0", "gulp-cached": "^1.1.0", @@ -19,12 +19,14 @@ "gulp-rename": "^1.2.2", "gulp-replace": "^0.5.4", "gulp-sass": "2.3.1", + "gulp-sass-glob": "^1.0.8", "gulp-sass-lint": "^1.1.1", "gulp-size": "^2.1.0", "gulp-sourcemaps": "^1.6.0", "kss": "^3.0.0-beta.14", "node-sass-import-once": "^1.2.0", - "sass-lint": "^1.7.0", + "path": "^0.12.7", + "run-sequence": "^2.2.0", "support-for": "^1.0.6", "typey": "^1.0.0", "zen-grids": "^2.0.3" @@ -34,6 +36,8 @@ }, "private": true, "scripts": { - "test": "gulp" + "dist": "NODE_ENV=production gulp", + "dev": "gulp watch", + "serve": "gulp serve" } } From c7ce8ca23f1c293cae8abaa933440709f799a85b Mon Sep 17 00:00:00 2001 From: iberdinsky Date: Mon, 27 Nov 2017 00:03:04 +0600 Subject: [PATCH 3/3] Move funcion to its original place. --- STARTERKIT/gulpfile.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/STARTERKIT/gulpfile.js b/STARTERKIT/gulpfile.js index d13b70c..b679cf6 100644 --- a/STARTERKIT/gulpfile.js +++ b/STARTERKIT/gulpfile.js @@ -54,6 +54,19 @@ options.theme = { // allow Browser Sync to serve the website and update CSS changes on the fly. options.drupalURL = ''; +// Converts module names to absolute paths for easy imports. +function sassModuleImporter(url, file, done) { + try { + let pathResolution = require.resolve(url); + return done({ + file: pathResolution + }); + } + catch (e) { + return null; + } +} + // Define the node-sass configuration. The includePaths is critical! options.sass = { importer: [sassModuleImporter, $.nodeSassImportOnce], @@ -256,19 +269,6 @@ gulp.task('sprites', function () { return spriteData.pipe(gulp.dest('.')); }); -// Converts module names to absolute paths for easy imports. -function sassModuleImporter(url, file, done) { - try { - let pathResolution = require.resolve(url); - return done({ - file: pathResolution - }); - } - catch (e) { - return null; - } -} - // Get new css files for kss-node. function getCss() { // Help KSS to automatically find new component CSS files.