diff --git a/STARTERKIT/.sass-lint.yml b/STARTERKIT/.sass-lint.yml index 1ca60b1..015bf8b 100644 --- a/STARTERKIT/.sass-lint.yml +++ b/STARTERKIT/.sass-lint.yml @@ -40,7 +40,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 45f6353..b679cf6 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'); @@ -61,9 +69,10 @@ function sassModuleImporter(url, file, done) { // 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. @@ -74,15 +83,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: [ @@ -97,9 +97,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' @@ -120,7 +119,7 @@ options.eslint = { options.sprites = { imgName: options.theme.images + 'sprites/sprites.png', cssName: 'components/init/_sprites.scss', - imgPath: path.relative(options.theme.css, options.theme.images + 'sprites/sprites.png'), + imgPath: $.path.relative(options.theme.css, options.theme.images + 'sprites/sprites.png'), cssVarMap: function (sprite) { sprite.name = 'sprite_' + sprite.name; } @@ -131,60 +130,42 @@ options.sprites = { // 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'), - spritesmith = require('gulp.spritesmith'); +// Browsersync options +options.browserSync = { + proxy: { + target: options.drupalURL + }, + xip: true +}; // The default task. gulp.task('default', ['build']); // Build everything. -gulp.task('build', ['sprites', 'styles', 'styleguide', 'lint']); - -// Build Sprites. -gulp.task('sprites', function () { - var spriteData = gulp.src(options.theme.sprites).pipe(spritesmith(options.sprites)); - return spriteData.pipe(gulp.dest('.')); -}); +gulp.task('build', ['clean', 'sprites', 'lint', 'styleguide']); -// 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('styles', ['sprites', 'clean:css'], function () { - return gulp.src(sassFiles) +// Styles, sourcemaps, autoprefixer +gulp.task('styles', function () { + 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})) @@ -194,7 +175,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. @@ -217,40 +198,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, - noOpen: false +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' + ); }); }); -gulp.task('watch:css', ['clean:css', 'styles'], function () { - return gulp.watch(options.theme.components + '**/*.scss', options.gulpWatchOptions, ['styles']); -}); - -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' @@ -259,12 +257,30 @@ 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}); }); +// Build Sprites. +gulp.task('sprites', function () { + var spriteData = gulp.src(options.theme.sprites).pipe($.spritesmith(options.sprites)); + return spriteData.pipe(gulp.dest('.')); +}); + +// 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/images-source/daemon.png b/STARTERKIT/images-source/daemon.png deleted file mode 100644 index dfa281a..0000000 Binary files a/STARTERKIT/images-source/daemon.png and /dev/null differ diff --git a/STARTERKIT/images-source/tux.png b/STARTERKIT/images-source/tux.png deleted file mode 100644 index 661e5a9..0000000 Binary files a/STARTERKIT/images-source/tux.png and /dev/null differ diff --git a/STARTERKIT/package.json b/STARTERKIT/package.json index 9ffc806..76219b7 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,13 +19,15 @@ "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", "gulp.spritesmith": "^6.4.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" @@ -35,6 +37,8 @@ }, "private": true, "scripts": { - "test": "gulp" + "dist": "NODE_ENV=production gulp", + "dev": "gulp watch", + "serve": "gulp serve" } }