Catégorie : Gulp

[Gulp] Utilisation de Blendid! Bonnes pratiques, astuces…

20/02/2018 / admin

Importer et étendre Foundation for Sites 6

Foundation s’importe dans le dossier node_modules en tant que dev dependency. Depuis la racine de votre Blendid, taper:

yarn add https://github.com/zurb/foundation-sites.git#v6.4.3

1	yarn add https://github.com/zurb/foundation-sites.git#v6.4.3

…où #v6.4.3 correspond à la version de Foundation que vous souhaitez utiliser.

Ensuite, éditer le fichier config/task-config.js comme suit:

module.exports = {
  [...]
  stylesheets : true,

  stylesheets: {
    sass: {
      includePaths: ["./node_modules/foundation-sites/scss/typography", "./node_modules/foundation-sites/scss"]
    }
  },

module.exports = {

[...]

stylesheets : true,

stylesheets: {

sass: {

includePaths: ["./node_modules/foundation-sites/scss/typography", "./node_modules/foundation-sites/scss"]

}

Si vous ne souhaitez pas les modifier, vous pourrez utiliser les sources de Foundation consignées dans le dossier node_modules/foundation-sites/ sans avoir à les surcharger dans votre dev en ajoutant ceci au fichier src/stylesheets/app.scss:

@import "foundation";
@include foundation-everything();

1 2	@import "foundation"; @include foundation-everything();

Si vous souhaitez modifier un fichier de Foundation, vous devez obligatoirement le surcharger dans votre dev. Nous allons par exemple surcharger typography/_base.scss. Pour ce faire, nous allons être obligé de surcharger également le fichier typography/_typography.scss (sans le modifier) car il contient le @import 'base'; qui importe le fichier qu’on souhaite modifier (et node-sass includePaths n’est pas assez intelligent pour vérifier la surcharge de fichier importés dans des fichiers qui ont eux-mêmes déjà été importés).

[Police d’icônes] bugs connus et leurs solutions

12/12/2017 / admin

Après mise à jour de la police d’icônes, ce n’est pas la bonne police qui s’affiche

Vous avez ajouté ou retiré des icônes de votre police et, après mise à jour sur votre serveur, l’affichage des polices est décalé et ce n’est plus les bonnes polices qui s’affichent au bon endroit (je sais, c’est pas très français tout ça, mais vous comprenez ce que je veux dire, non?)

Le problème peut venir de la mise en cache des fonts et le blog CSS Tricks propose plusieurs solutions dans son article Strategies for Cache-Busting CSS.

C’est notamment la seconde solution qui est intéressante pour un dev front-end: Changing file name.
Elle consiste (pour faire simple) à attribuer un libellé unique au fichier incriminé à chaque fois qu’il est modifié. De cette manière, le serveur (quasiment) peu importe comment il est configuré, verra que c’est un nouveau fichier et en tiendra compte lors du prochain affichage d’une page dans un navigateur.

css-tricks.com-Strategies for Cache-BustingCSS (version PDF pour la postérité).

Une solution à mettre en place via Gulp

gulp-iconfont issue – font change so every build. One think bothers me: on every build of the iconfont the resulting font changes so it’s in my local changes all the time. Why the font changes despite I’m not changing the svg icons? How can I solve this issue?

See the gulp-svg2ttf timestamp option https://github.com/nfroidure/gulp-iconfont#iconfontoptions.

I have solved this problem as follows: first I generate a checksum and store it in the package.json with the current timestamp. This way the timestamp changes only when the checksum changes.

The relevant parts of my gulpfile:

'use strict';

var fs = require('fs');
var path = require('path');
var crypto = require('crypto');

var gulp = require('gulp');
var iconfont = require('gulp-iconfont');
var intercept = require('gulp-intercept');
var naturalSort = require('gulp-natural-sort');

var del = require('del');

var PACKAGE = require('./package.json');
if(!('timestamps' in PACKAGE)) {
    PACKAGE.timestamps = {};
}

var FILES = '/your/path/here/*.svg';
var FONT_NAME = 'your-name';
var DESTINATION = '/your/path/here/';

var digest;

gulp.task('digest', function() {
    var hash = crypto.createHash('sha1');
    return gulp.src([FILES])
        .pipe(naturalSort())
        .pipe(intercept(function(file){
            hash.update(file.relative);
            hash.update(file.contents);
        }))
        .on('end', function() {
            digest = hash.digest('base64').replace(/[+\/=]+/g, '').substring(0, 5);
            if(!(digest in PACKAGE.timestamps)) {
                PACKAGE.timestamps[digest] = Math.round(Date.now()/1000);
            }
            fs.writeFileSync('./package.json', JSON.stringify(PACKAGE, null, 2));
        });
});

gulp.task('clean', ['digest'], function() {
    var glob = path.join(DESTINATION, FONT_NAME);
    return del([glob+'*', '!'+glob+'@'+digest+'*'], {force: true});
});

gulp.task('generate', ['digest'], function() {
    var options = {
        fontName: FONT_NAME,
        fileName: FONT_NAME+'@'+digest,
        timestamp: PACKAGE.timestamps[digest]
    };
    return gulp.src([FILES])
        .pipe(iconfont(options))
        .pipe(gulp.dest(DESTINATION));
});

gulp.task('font', ['generate', 'clean']);

'use strict';

var fs = require('fs');

var path = require('path');

var crypto = require('crypto');

var gulp = require('gulp');

var iconfont = require('gulp-iconfont');

var intercept = require('gulp-intercept');

var naturalSort = require('gulp-natural-sort');

var del = require('del');

var PACKAGE = require('./package.json');

if(!('timestamps' in PACKAGE)) {

PACKAGE.timestamps = {};

}

var FILES = '/your/path/here/*.svg';

var FONT_NAME = 'your-name';

var DESTINATION = '/your/path/here/';

var digest;

gulp.task('digest', function() {

var hash = crypto.createHash('sha1');

return gulp.src([FILES])

.pipe(naturalSort())

.pipe(intercept(function(file){

hash.update(file.relative);

hash.update(file.contents);

}))

.on('end', function() {

digest = hash.digest('base64').replace(/[+\/=]+/g, '').substring(0, 5);

if(!(digest in PACKAGE.timestamps)) {

PACKAGE.timestamps[digest] = Math.round(Date.now()/1000);

}

fs.writeFileSync('./package.json', JSON.stringify(PACKAGE, null, 2));

});

gulp.task('clean', ['digest'], function() {

var glob = path.join(DESTINATION, FONT_NAME);

return del([glob+'*', '!'+glob+'@'+digest+'*'], {force: true});

});

gulp.task('generate', ['digest'], function() {

var options = {

fontName: FONT_NAME,

fileName: FONT_NAME+'@'+digest,

timestamp: PACKAGE.timestamps[digest]

};

return gulp.src([FILES])

.pipe(iconfont(options))

.pipe(gulp.dest(DESTINATION));

});

gulp.task('font', ['generate', 'clean']);

Ce n’est pas la bonne icône qui s’affiche sous Chrome

Après avoir ajouté à la volée une ou plusieurs icônes à votre bibliothèque custom, certaines icônes en front sont remplacées par d’autres… C’est un souci avec les caches du navigateur Chrome. Il est évoqué ici: Issue with Icon Fonts in Chrome 23.

La solution consiste à déclarer le(s) format(s) woff jsute après le format eot et avant tous les autres:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

@font-face {

font-family: 'Graublau Web';

src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');

}

Source: Bulletproof @font-face Syntax par Paul Irish.

Une deuxième solution consiste à ne générer que le format woff, la prise en charge de ce dernier étant particulièrement étendue aujourd’hui:

// conf GULP
    "iconfont": {
      "fontName": "iconfont",
      "centerHorizontally": true,
      "normalize": true,
      "fontHeight": 1001,
      "formats": ["woff"],
      "prependUnicode": false,
      "timestamp": "runTimestamp"
    },

// conf GULP

"iconfont": {

"fontName": "iconfont",

"centerHorizontally": true,

"normalize": true,

"fontHeight": 1001,

"formats": ["woff"],

"prependUnicode": false,

"timestamp": "runTimestamp"

// TEMPLATE SASS
@font-face {
  font-family: '<%= fontName %>';
  // src: url('<%= fontPath %><%= fontName %>.eot');
  // src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('embedded-opentype'),
  //      url('<%= fontPath %><%= fontName %>.woff2') format('woff2'),
  //      url('<%= fontPath %><%= fontName %>.woff') format('woff'),
  //      url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),
  //      url('<%= fontPath %><%= fontName %>.svg') format('svg');
  src: url('<%= fontPath %><%= fontName %>.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

// TEMPLATE SASS

@font-face {

font-family: '<%= fontName %>';

// src: url('<%= fontPath %><%= fontName %>.eot');

// src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('embedded-opentype'),

// url('<%= fontPath %><%= fontName %>.woff2') format('woff2'),

// url('<%= fontPath %><%= fontName %>.woff') format('woff'),

// url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),

// url('<%= fontPath %><%= fontName %>.svg') format('svg');

src: url('<%= fontPath %><%= fontName %>.woff') format('woff');

font-weight: normal;

font-style: normal;

}

[NPM][Gulp] Ajouter un custom build de Modernizr à un projet

31/10/2017 / admin

Ajouter les sources de Modernizr comme dépendances NPM

Source: Modernizr documentation > Downloading Modernizr > Command Line Config.

npm install --save-dev modernizr

1	npm install --save-dev modernizr

Installer également le paquet gulp-modernizr.

npm install --save-dev gulp-modernizr

1	npm install --save-dev gulp-modernizr

Ce plugin permet tout un tas de paramétrages détaillés ici. Pour l’heure, nous exploiterons uniquement les champs options et tests.

gulpconf.json

{
  "plugins": {
    "modernizr": {
      "options" : [
        "setClasses"
      ],
      "tests" : [
        "touchevents"
      ]
    }
  }, 
}

{

"plugins": {

"modernizr": {

"options" : [

"setClasses"

"tests" : [

"touchevents"

]

}

Ici je créer un custom build avec uniquement la feature touchevents à déclarer sous tests.

Connaître les options requises en fonction des features qu’on souhaite embarquer

Pour vous aider à savoir quelles sont les options requises en fonction des features que vous souhaitez utiliser, vous pouvez créer votre custom build via l’interface en ligne disponible sur modernizr.com.

Choisissez par exemple la feature touchevents et cliquez sur BUILD (bouton rose en haut à droite). Une modale apparaît. Sous Grunt config cliquez sur « Copy to clipboard ». Le code suivant apparaît:

{
  "crawl": false,
  "customTests": [],
  "dest": "/PATH/TO/modernizr-output.js",
  "tests": [
    "touchevents"
  ],
  "options": [
    "setClasses"
  ],
  "uglify": true
}

{

"crawl": false,

"customTests": [],

"dest": "/PATH/TO/modernizr-output.js",

"tests": [

"touchevents"

"options": [

"setClasses"

"uglify": true

}

Les champs options et tests révèlent les pré-requis à renseigner dans la configuration de votre plugin Gulp.

gulpfile.js

Déclarer gulp-modernizr:

var modernizr = require('gulp-modernizr');

1	var modernizr = require('gulp-modernizr');

Puis initialiser la tâche de build:

gulp.task('build:modernizr', function() {
  gulp.src('./js/*.js')
    .pipe(modernizr('modernizr-custom.js', config.plugins.modernizr))
    .pipe(gulp.dest(config.paths.scripts.dest))
});

gulp.task('build:modernizr', function() {

gulp.src('./js/*.js')

.pipe(modernizr('modernizr-custom.js', config.plugins.modernizr))

.pipe(gulp.dest(config.paths.scripts.dest))

});

[Gulp][SASS] Exploiter l’option includePaths de gulp-sass pour définir, en cas de surcharges, un ordre de priorité des chemins vers lequels Gulp ira regarder quand il rencontrera un @import

05/05/2017 / admin

(Ma question) gulp-sass includePaths parameter and import of partial files declarations that are not in the main.scss issue sur Stack Overflow.

Problème: I’m using gulp-sass and would like to define a load_path so that I don’t have to have really long @import rules voor bower dependencies e.g..

@import "normalize"

1	@import "normalize"

…à la place de:

@import "../../../../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/normalize"

1	@import "../../../../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/normalize"

Quel serait le meilleur moyen pour parvenir à ce résultat en utilisant gulp-sass?

Exemple d’utilisation de l’option `includePaths` de gulp-sass avec les sources SCSS de Foundation 6 for Sites

ATTENTION: gulp-sass semble ne pas digérer le globbing dans les chemins.

gulpconf.json

config.paths.styles.src: le chemin vers vos SCSS custom
config.paths.styles.srcIncludePaths: dans mon exemple ci-dessous, on répète le chemin vers les SCSS custom, puis on déclare le chemin vers les surcharges de SCSS relatives aux sources de Foundation ("src/style/vendor-override/foundation-sites/scss/") puis pour finir on déclare le chemin vers les sources out-of-the-box de Foundation qui seront utilisées si Gulp ne trouve aucune surcharge (les surcharges doivent respecter l’arborescence, les noms des dossiers et des fichiers de l’original pour être prises en compte!).

gulp-sass ne supportant pas le globbing dans les chemins, il faudra déclarer des chemins très précis vers vos vendors et vos vendors-override ici. Le dossier vendors-override devra toujours respecter la même arborescence que le dossier vendor pour que l’héritage fonctionne.

{
  "paths": {
    "styles": {
      "src": "src/style/",
      "srcIncludePaths": ["src/style/", "src/style/vendor-override/foundation-sites/scss/", "src/vendor/foundation-sites/scss/"],
      "dest": "style/"
    },
  }
}

{

"paths": {

"styles": {

"src": "src/style/",

"srcIncludePaths": ["src/style/", "src/style/vendor-override/foundation-sites/scss/", "src/vendor/foundation-sites/scss/"],

"dest": "style/"

}

gulpfile.js

gulp.task('sass', function() {
  gulp.src(config.paths.styles.src + '**/*.scss')
    .pipe(plugins.sass({
        // on déclare les chemins dans l'ordre dans lesquels on souhaite qu'ils soient parcourus pour retrouver les sources SCSS
        includePaths: config.paths.styles.srcIncludePaths
      })
      .on('error', plugins.sass.logError))
    .pipe(plugins.autoprefixer(config.plugins.autoprefixer.browsers))
    .pipe(cleanCSS())
    .pipe(gulp.dest(config.paths.styles.dest));
});

gulp.task('sass', function() {

gulp.src(config.paths.styles.src + '**/*.scss')

.pipe(plugins.sass({

// on déclare les chemins dans l'ordre dans lesquels on souhaite qu'ils soient parcourus pour retrouver les sources SCSS

includePaths: config.paths.styles.srcIncludePaths

})

.on('error', plugins.sass.logError))

.pipe(plugins.autoprefixer(config.plugins.autoprefixer.browsers))

.pipe(cleanCSS())

.pipe(gulp.dest(config.paths.styles.dest));

});

main.scss

/**
 * Foundation for Sites by ZURB
 * Version 6.4.3
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */

// Dependencies
@import '../_vendor/normalize-scss/sass/normalize';
@import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';
@import '../_vendor/sassy-lists/stylesheets/helpers/true';
@import '../_vendor/sassy-lists/stylesheets/functions/contain';
@import '../_vendor/sassy-lists/stylesheets/functions/purge';
@import '../_vendor/sassy-lists/stylesheets/functions/remove';
@import '../_vendor/sassy-lists/stylesheets/functions/replace';
@import '../_vendor/sassy-lists/stylesheets/functions/to-list';

// Settings
// import your own `settings` here or
// import and modify the default settings through
@import 'settings/settings';

// Sass utilities
@import 'util/util';

// Global variables and styles
@import 'global';

// Components
@import 'grid/grid';
@import 'xy-grid/xy-grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/card';
@import 'components/close-button';
@import 'components/drilldown';
@import 'components/dropdown-menu';
@import 'components/dropdown';
@import 'components/flex';
@import 'components/responsive-embed';
@import 'components/label';
@import 'components/media-object';
@import 'components/menu';
@import 'components/menu-icon';
@import 'components/off-canvas';
@import 'components/orbit';
@import 'components/pagination';
@import 'components/progress-bar';
@import 'components/reveal';
@import 'components/slider';
@import 'components/sticky';
@import 'components/switch';
@import 'components/table';
@import 'components/tabs';
@import 'components/title-bar';
@import 'components/top-bar';
@import 'components/thumbnail';
@import 'components/tooltip';
@import 'prototype/prototype';

@mixin foundation-everything(
  $flex: true,
  $prototype: false
) {
  @if $flex {
    $global-flexbox: true !global;
  }

  @include foundation-global-styles;
  @if not $flex {
    @include foundation-grid;
  }
  @else {
    @if $xy-grid {
      @include foundation-xy-grid-classes;
    }
    @else {
      @include foundation-flex-grid;
    }
  }
  @include foundation-typography;
  @include foundation-forms;
  @include foundation-button;
  @include foundation-accordion;
  @include foundation-accordion-menu;
  @include foundation-badge;
  @include foundation-breadcrumbs;
  @include foundation-button-group;
  @include foundation-callout;
  @include foundation-card;
  @include foundation-close-button;
  @include foundation-menu;
  @include foundation-menu-icon;
  @include foundation-drilldown-menu;
  @include foundation-dropdown;
  @include foundation-dropdown-menu;
  @include foundation-responsive-embed;
  @include foundation-label;
  @include foundation-media-object;
  @include foundation-off-canvas;
  @include foundation-orbit;
  @include foundation-pagination;
  @include foundation-progress-bar;
  @include foundation-slider;
  @include foundation-sticky;
  @include foundation-reveal;
  @include foundation-switch;
  @include foundation-table;
  @include foundation-tabs;
  @include foundation-thumbnail;
  @include foundation-title-bar;
  @include foundation-tooltip;
  @include foundation-top-bar;
  @include foundation-visibility-classes;
  @include foundation-float-classes;

  @if $flex {
    @include foundation-flex-classes;
  }

  @if $prototype {
    @include foundation-prototype-classes;
  }
}
@include foundation-everything;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

/**

* Foundation for Sites by ZURB

* Version 6.4.3

* foundation.zurb.com

* Licensed under MIT Open Source

// Dependencies

@import '../_vendor/normalize-scss/sass/normalize';

@import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';

@import '../_vendor/sassy-lists/stylesheets/helpers/true';

@import '../_vendor/sassy-lists/stylesheets/functions/contain';

@import '../_vendor/sassy-lists/stylesheets/functions/purge';

@import '../_vendor/sassy-lists/stylesheets/functions/remove';

@import '../_vendor/sassy-lists/stylesheets/functions/replace';

@import '../_vendor/sassy-lists/stylesheets/functions/to-list';

// Settings

// import your own `settings` here or

// import and modify the default settings through

@import 'settings/settings';

// Sass utilities

@import 'util/util';

// Global variables and styles

@import 'global';

// Components

@import 'grid/grid';

@import 'xy-grid/xy-grid';

@import 'typography/typography';

@import 'forms/forms';

@import 'components/visibility';

@import 'components/float';

@import 'components/button';

@import 'components/button-group';

@import 'components/accordion-menu';

@import 'components/accordion';

@import 'components/badge';

@import 'components/breadcrumbs';

@import 'components/callout';

@import 'components/card';

@import 'components/close-button';

@import 'components/drilldown';

@import 'components/dropdown-menu';

@import 'components/dropdown';

@import 'components/flex';

@import 'components/responsive-embed';

@import 'components/label';

@import 'components/media-object';

@import 'components/menu';

@import 'components/menu-icon';

@import 'components/off-canvas';

@import 'components/orbit';

@import 'components/pagination';

@import 'components/progress-bar';

@import 'components/reveal';

@import 'components/slider';

@import 'components/sticky';

@import 'components/switch';

@import 'components/table';

@import 'components/tabs';

@import 'components/title-bar';

@import 'components/top-bar';

@import 'components/thumbnail';

@import 'components/tooltip';

@import 'prototype/prototype';

@mixin foundation-everything(

$flex: true,

$prototype: false

) {

@if $flex {

$global-flexbox: true !global;

}

@include foundation-global-styles;

@if not $flex {

@include foundation-grid;

}

@else {

@if $xy-grid {

@include foundation-xy-grid-classes;

}

@else {

@include foundation-flex-grid;

}

@include foundation-typography;

@include foundation-forms;

@include foundation-button;

@include foundation-accordion;

@include foundation-accordion-menu;

@include foundation-badge;

@include foundation-breadcrumbs;

@include foundation-button-group;

@include foundation-callout;

@include foundation-card;

@include foundation-close-button;

@include foundation-menu;

@include foundation-menu-icon;

@include foundation-drilldown-menu;

@include foundation-dropdown;

@include foundation-dropdown-menu;

@include foundation-responsive-embed;

@include foundation-label;

@include foundation-media-object;

@include foundation-off-canvas;

@include foundation-orbit;

@include foundation-pagination;

@include foundation-progress-bar;

@include foundation-slider;

@include foundation-sticky;

@include foundation-reveal;

@include foundation-switch;

@include foundation-table;

@include foundation-tabs;

@include foundation-thumbnail;

@include foundation-title-bar;

@include foundation-tooltip;

@include foundation-top-bar;

@include foundation-visibility-classes;

@include foundation-float-classes;

@if $flex {

@include foundation-flex-classes;

}

@if $prototype {

@include foundation-prototype-classes;

}

@include foundation-everything;

Cette partie de ma main.scss comporte un copier/coller du contenu du fichier foundation.scss qui met en place les bases du framework côté SCSS.

Je n’ai rien modifié mise à part l’ajout de mon propre fichier settings :

// Settings
// import your own `settings` here or
// import and modify the default settings through
@import 'settings/settings';

// Settings

// import your own `settings` here or

// import and modify the default settings through

@import 'settings/settings';

Gulp va d’abord chercher les fichiers à importer dans src/style/ (il n’y trouvera rien pour ce qui est de Foundation) avant de se rabattre sur src/style/vendor-override/foundation-sites/scss/, puis sur src/vendor/foundation-sites/scss/.

sass-include-paths – Generates include paths for node-sass for packages from popular package managers like npm, bower, ruby gem, ruby bundler.

What does Gulp’s includePaths do?

The SASS compiler uses each path in loadPaths when resolving SASS @imports.

loadPaths: ['styles/foo', 'styles/bar']

@import "x"; // found via ./styles/foo/_x.scss
@import "y"; // found via ./styles/bar/_y.scss

loadPaths: ['styles/foo', 'styles/bar']

@import "x"; // found via ./styles/foo/_x.scss

@import "y"; // found via ./styles/bar/_y.scss

Note that the compiler resolves each @import by considering each path in loadPaths from left-to-right (similar to $PATH in a UNIX environment). An example scenario could be:

loadPaths: ['styles/i', 'styles/ii', 'styles/iii', 'styles/iv']

@import "x"; // no file at ./styles/i/_x.scss
             // no file  at ./styles/ii/_x.scss
             // found a file  at ./styles/iii/_x.scss ...
             //     ... this file will be used as the import
             //     ... terminate lookup
             // the file ./styles/iv/_x.scss will be ignored

loadPaths: ['styles/i', 'styles/ii', 'styles/iii', 'styles/iv']

@import "x"; // no file at ./styles/i/_x.scss

// no file at ./styles/ii/_x.scss

// found a file at ./styles/iii/_x.scss ...

// ... this file will be used as the import

// ... terminate lookup

// the file ./styles/iv/_x.scss will be ignored

There was no _x.scss file in styles/i, so it moved on to look inside styles/ii. Eventually it found an _x.scss file in styles/iii and finished the lookup. It looks at each folder in loadPaths starting from the first element in the array and moving right. After attempting all paths, if we can’t find the file, then we declare that this @import statement is invalid.

Load paths is useful if you have a external library (like bournon/neat). The external library is large and will use lots of @import statements. However they won’t match your project folder structure and so won’t resolve. However, you can add an extra folders to the loadPaths so that the @imports inside the external library do resolve.

gulp-sass work around for load_path support?

After struggling with this myself I found a option in gulp-sass :

sass({includePaths: ['./bower_components/bootstrap-sass/assets/stylesheets']})

1	sass({includePaths: ['./bower_components/bootstrap-sass/assets/stylesheets']})

Example:

var gulp = require('gulp'),
    sass = require('gulp-sass')
    notify = require("gulp-notify");

var config = {
    sassPath: './resources/sass',   // store the sass files I create
    bowerDir: './bower_components'
}

gulp.task('css', function() {
  return gulp.src(config.sassPath + '/style.scss')
    .pipe(sass({
        outputStyle: 'compressed',
        includePaths: [
            './resources/sass',
            config.bowerDir + '/bootstrap-sass/assets/stylesheets',
            config.bowerDir + '/font-awesome/scss']
        })
       .on("error", notify.onError(function (error) {
            return "Error: " + error.message;
        })))
    .pipe(gulp.dest('./public/css'));
});

var gulp = require('gulp'),

sass = require('gulp-sass')

notify = require("gulp-notify");

var config = {

sassPath: './resources/sass', // store the sass files I create

bowerDir: './bower_components'

}

gulp.task('css', function() {

return gulp.src(config.sassPath + '/style.scss')

.pipe(sass({

outputStyle: 'compressed',

includePaths: [

'./resources/sass',

config.bowerDir + '/bootstrap-sass/assets/stylesheets',

config.bowerDir + '/font-awesome/scss']

})

.on("error", notify.onError(function (error) {

return "Error: " + error.message;

})))

.pipe(gulp.dest('./public/css'));

});

Import and globbing in SASS

Protégé : [Gulp-flow Change 3.6.x] Exploiter une ressource vendor dans un thème

03/05/2017 / admin

[Gulp] Spritesmith

24/04/2017 / admin

Utilisation de gulp.spritesmith-multi, ATTENTION: je déconseille l’utilisation de ce plugin pour créer plusieurs sprites à partir d’une tâche Gulp unique. Préférer gulp-spritesmith et l’utilisation de gulp-folders.

Ressources en ligne:

https://stefanimhoff.de/2014/gulp-tutorial-10-generating-sprites/ – avec notamment la gestion des :hover
Tuto intéressant pour aller plus loin avec gulp-spritesmith: CSS Sprite Management with Gulp, Part 2.

Gulp – make one sprite per folder

Source: Gulp – make sprites by folder

Plugins: path, gulp.spritesmith, merge-stream, gulp-folders, imagemin, imagemin-pngquant ATTENTION: dans le sujet StasckOverflow, l’auteur omet le plugin gulp-folders dans la liste des paquets requis.

gulp.task(
    'sprites', folders(path.src.sprites, function (folder) {
        // Generate our spritesheet
       var spriteData = gulp.src(npmpath.join(path.src.sprites, folder, '*.png'))
           .pipe(spritesmith({
                imgName: 'sprite_' + folder + '.png',
                cssName: 'sprite_' + folder + '.scss'
            }));

        // Pipe image stream through image optimizer and onto disk
        var imgStream = spriteData.img
            .pipe(imagemin({
                progressive: true,
                interlaced: true,
                optimizationLevel: 7,
                svgoPlugins: [{removeViewBox: false}, {removeUselessStrokeAndFill: false}],
                use: [pngquant({quality: '65-80', speed: 4})]
            }))
            .pipe(gulp.dest(path.build.sprites))
            .pipe(notify({message: 'SPRITE IMG task complete', onLast: true}));
        // Pipe CSS stream through CSS optimizer and onto disk
        var cssStream = spriteData.css
            .pipe(gulp.dest(path.src.sassFolder + 'module/sprites'))
            .pipe(notify({message: 'SPRITE SCSS task complete', onLast: true}));

        // Return a merged stream to handle both `end` events
        return merge(imgStream, cssStream);

}));

gulp.task(

'sprites', folders(path.src.sprites, function (folder) {

// Generate our spritesheet

var spriteData = gulp.src(npmpath.join(path.src.sprites, folder, '*.png'))

.pipe(spritesmith({

imgName: 'sprite_' + folder + '.png',

cssName: 'sprite_' + folder + '.scss'

}));

// Pipe image stream through image optimizer and onto disk

var imgStream = spriteData.img

.pipe(imagemin({

progressive: true,

interlaced: true,

optimizationLevel: 7,

svgoPlugins: [{removeViewBox: false}, {removeUselessStrokeAndFill: false}],

use: [pngquant({quality: '65-80', speed: 4})]

}))

.pipe(gulp.dest(path.build.sprites))

.pipe(notify({message: 'SPRITE IMG task complete', onLast: true}));

// Pipe CSS stream through CSS optimizer and onto disk

var cssStream = spriteData.css

.pipe(gulp.dest(path.src.sassFolder + 'module/sprites'))

.pipe(notify({message: 'SPRITE SCSS task complete', onLast: true}));

// Return a merged stream to handle both `end` events

return merge(imgStream, cssStream);

}));

Créer un sprite bitmap (PNG, JPG) par dossier

function spriteData(folder, format){
  return gulp.src(path.join(config.paths.images.sprites.src, folder, '*'+format))
    .pipe(plugins.changed(config.paths.images.dest))
    .pipe(plugins.imagemin())
    .pipe(plugins.spritesmith({
      cssName: config.plugins.spritesmith.cssName + folder + '.' + config.plugins.spritesmith.cssFormat,
      imgName: config.plugins.spritesmith.imgName + folder + format,
      imgPath: config.plugins.spritesmith.imgPath + folder + format,
      cssVarMap: function (sprite) {
        sprite.name = config.plugins.spritesmith.classPrefix + sprite.name;
      }
    }));
}

gulp.task('bitmap:sprite', plugins.folders(config.paths.images.sprites.src, function (folder) {
  var spriteDataPng = spriteData(folder,'.png');
  var spriteDataJpg = spriteData(folder,'.jpg');
  var imgStreamPng = spriteDataPng.img
    .pipe(gulp.dest(config.paths.images.dest));
  var cssStreamPng = spriteDataPng.css
    .pipe(gulp.dest(config.paths.styles.src));
  var imgStreamJpg = spriteDataJpg.img
    .pipe(gulp.dest(config.paths.images.dest));
  var cssStreamJpg = spriteDataJpg.css
    .pipe(gulp.dest(config.paths.styles.src));
  return merge(imgStreamPng, cssStreamPng, imgStreamJpg, cssStreamJpg);
}));

function spriteData(folder, format){

return gulp.src(path.join(config.paths.images.sprites.src, folder, '*'+format))

.pipe(plugins.changed(config.paths.images.dest))

.pipe(plugins.imagemin())

.pipe(plugins.spritesmith({

cssName: config.plugins.spritesmith.cssName + folder + '.' + config.plugins.spritesmith.cssFormat,

imgName: config.plugins.spritesmith.imgName + folder + format,

imgPath: config.plugins.spritesmith.imgPath + folder + format,

cssVarMap: function (sprite) {

sprite.name = config.plugins.spritesmith.classPrefix + sprite.name;

}

}));

}

gulp.task('bitmap:sprite', plugins.folders(config.paths.images.sprites.src, function (folder) {

var spriteDataPng = spriteData(folder,'.png');

var spriteDataJpg = spriteData(folder,'.jpg');

var imgStreamPng = spriteDataPng.img

.pipe(gulp.dest(config.paths.images.dest));

var cssStreamPng = spriteDataPng.css

.pipe(gulp.dest(config.paths.styles.src));

var imgStreamJpg = spriteDataJpg.img

.pipe(gulp.dest(config.paths.images.dest));

var cssStreamJpg = spriteDataJpg.css

.pipe(gulp.dest(config.paths.styles.src));

return merge(imgStreamPng, cssStreamPng, imgStreamJpg, cssStreamJpg);

}));

Spritesmith : Multiple spritesheets, one css file?

Source: Multiple spritesheets, one css file?

It’s possible to have multiple sprite sheets based on directory structure, but all de CSS go to just one single file?
For example, given this directory structure:

sprites/
    icons/
        icon1.png
        icon2.png
    logos/
        logo1.png
        logo2.png

sprites/

icons/

icon1.png

icon2.png

logos/

logo1.png

logo2.png

it’s possible to generate two spritesheets icons-spritesheet.png and logos-spritesheet.png, and then all the CSS just to one file, lets say css/sprites.css.

// Load in our dependencies
var gulp = require('gulp');
var concat = require('gulp-concat');
var merge = require('merge-stream');
var spritesmith = require('gulp.spritesmith');

// Define our gulp task
gulp.task('sprite', function () {
  // Generate our spritesheets
  var iconSpriteData = gulp.src('icons/*.png').pipe(spritesmith({
    imgName: 'icons.png',
    cssName: 'icons.css'
  }));
  var logoSpriteData = gulp.src('logos/*.png').pipe(spritesmith({
    imgName: 'logos.png',
    cssName: 'logos.css'
  }));

  // Output our images
  var iconImgStream = iconSpriteData.img.pipe(gulp.dest('path/to/image/folder/'));
  var logoImgStream = logoSpriteData.img.pipe(gulp.dest('path/to/image/folder/'));

  // Concatenate our CSS streams
  var cssStream = merge(iconSpriteData.css, logoSpriteData.css)
    .pipe(concat('main.css'))
    .pipe(gulp.dest('path/to/css/folder/'));

  // Return a merged stream to handle all our `end` events
  return merge(iconImgStream, logoImgStream, cssStream);
});

// Load in our dependencies

var gulp = require('gulp');

var concat = require('gulp-concat');

var merge = require('merge-stream');

var spritesmith = require('gulp.spritesmith');

// Define our gulp task

gulp.task('sprite', function () {

// Generate our spritesheets

var iconSpriteData = gulp.src('icons/*.png').pipe(spritesmith({

imgName: 'icons.png',

cssName: 'icons.css'

}));

var logoSpriteData = gulp.src('logos/*.png').pipe(spritesmith({

imgName: 'logos.png',

cssName: 'logos.css'

}));

// Output our images

var iconImgStream = iconSpriteData.img.pipe(gulp.dest('path/to/image/folder/'));

var logoImgStream = logoSpriteData.img.pipe(gulp.dest('path/to/image/folder/'));

// Concatenate our CSS streams

var cssStream = merge(iconSpriteData.css, logoSpriteData.css)

.pipe(concat('main.css'))

.pipe(gulp.dest('path/to/css/folder/'));

// Return a merged stream to handle all our `end` events

return merge(iconImgStream, logoImgStream, cssStream);

});

Error: Cannot find module ‘gulp.spritesmith’

Si ce message d’erreur apparaît au lancement de la tâche Gulp, tenter une installation avec la commande suivante et à la racine du dossier qui contient la gulpfile.js :

$ sudo npm install gulp.spritesmith --save-dev

1	$ sudo npm install gulp.spritesmith --save-dev

[Gulp] Supprimer un ensemble de fichiers ayant la même extension avec Del et la méthode .unshift() en omettant certains fichiers en particulier

21/04/2017 / admin

Problème

J’ai une tâche style:clean qui supprime des fichiers inutiles et ayant l’extension *.css dans un dossier /style. Le plugin Del fonctionne très bien pour ça, mais j’avais besoin de déclarer le scope des fichiers à cibler par la tâche en 2 entités distinctes :

Le chemin vers le dossier style/ et le format de fichier à cibler (config.paths.styles.dest + '*.css').
Une liste de fichiers à ignorer (config.clean.style.ignore).

Lors de mes tests infructueux, les fichiers ignorés étaient supprimés.

Solution

La méthode .unshift() permet l’insertion d’éléments en début de tableau.

Dans mon fichier gulpconf.json:

{
  "paths": {
    "styles": {
        "src": "src/style/",
        "dest": "style/"
    }
  },
  "clean": {
    "style": {
      "ignore": ["!style/layout.css", "!style/layout.xul.all.css", "!style/skin-variables.css", "!style/skin.css"]
    }
  }
}

{

"paths": {

"styles": {

"src": "src/style/",

"dest": "style/"

}

"clean": {

"style": {

"ignore": ["!style/layout.css", "!style/layout.xul.all.css", "!style/skin-variables.css", "!style/skin.css"]

}

Si vous n’avez pas de fichiers à ignorer, laissez le tableau vide comme ceci:

{
  "clean": {
    "style": {
      "ignore": []
    }
  }
}

{

"clean": {

"style": {

"ignore": []

}

Dans mon gulpfile.js:

gulp.task('style:clean', function(){
  var arr = config.clean.style.ignore;
  arr.unshift(config.paths.styles.dest + '*.css');
  del.sync(arr);
});

gulp.task('style:clean', function(){

var arr = config.clean.style.ignore;

arr.unshift(config.paths.styles.dest + '*.css');

del.sync(arr);

});

Optimiser ce code en passant par une fonction

ATTENTION: ce code ne fonctionne pas. En réalité, si vous avez plusieurs tâches de clean (css, js, etc…), le lancement d’une seule de ces tâches va également faire le travail de toutes les autres …

Exemple: je lance gulp js:clean et les fichiers CSS concernés par la tâche gulp css:clean sont effacés également.

function gulpClean(type, format){ var arr = eval("config.clean."+type+".ignore"); arr.unshift(eval("config.paths."+type+"s.dest + '*."+format+"'")); del.sync(arr); } gulp.task('style:clean', gulpClean('style', 'css'));

1
2
3
4
5
6
7

function gulpClean(type, format){
  var arr = eval("config.clean."+type+".ignore");
  arr.unshift(eval("config.paths."+type+"s.dest + '*."+format+"'"));
  del.sync(arr);
}

gulp.task('style:clean', gulpClean('style', 'css'));

[Gulp] Stocker ses options de configuration dans un fichier JSON externe surveillé (gulp watch)

31/03/2017 / admin

Sources :

Doc officielle à propos des fichiers externes de configuration au format JSON : Gulp recipes – Using external config file

M’a donné la solution : Gulp Minify & Concat Javascript

M’ont seulement mis sur la voie : Javascript: get package.json data in gulpfile.js, How To Keep Your Gulp Configuration Options In A JSON File

How to Simplify Your Development Workflow with Gulp

Problématique :

Ce message laissé sur Stack Overflow. J’utilise Gulp pour minifier 2 types bien distincts de fichiers JS :

L’ensemble des fichiers JS stockés dans un dossier ./src/js qui sont des plugins custom écrits spécifiquement pour les besoins du projet ou des vendor (ou « third-party ») plugins surchargés et modifiés spécifiquement pour les besoins du projets.

.

Une sélection de fichiers JS stockés dans un dossier ./src/vendor/[...] qui sont des vendor plugins que je souhaite utiliser en l’état, sans les modifier (composant Bootstrap, Modernizr, ou autre…).

J’utilise un fichier de configuration externe gulpconf.json pour (notamment) constituer une liste de chemins vers les third-party plugins que je souhaite ajouter aux sources de mon projet. Ce fichier ressemble à ceci :

{ "js" : { "vendor" : [ "./src/vendor/browser-detection/src/browser-detection.js", "./src/vendor/foundation/js/foundation.js", "./src/vendor/modernizr/lib/metadata.js", "./src/vendor/jquery-mobile/js/events/navigate.js", "./src/vendor/jquery-mobile/js/events/touch.js", "./src/vendor/jquery-ui/ui/jquery.ui.autocomplete.js", "./src/vendor/jquery-ui/ui/jquery.ui.effect-clip.js", "./src/vendor/jquery-ui/ui/jquery.ui.effect-bounce.js" ] } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{
  "js" : {
    "vendor" : [
      "./src/vendor/browser-detection/src/browser-detection.js",
      "./src/vendor/foundation/js/foundation.js",
      "./src/vendor/modernizr/lib/metadata.js",
      "./src/vendor/jquery-mobile/js/events/navigate.js",
      "./src/vendor/jquery-mobile/js/events/touch.js",
      "./src/vendor/jquery-ui/ui/jquery.ui.autocomplete.js",
      "./src/vendor/jquery-ui/ui/jquery.ui.effect-clip.js",
      "./src/vendor/jquery-ui/ui/jquery.ui.effect-bounce.js"
    ]
  }
}

Le problème est que lorsque je lance ma tâche gulp watch, des modifications (typiquement, l’ajout d’un chemin vers un nouveau vendor plugin que je souhaite ajouter à mon projet) sont détectées dans mon fichier de config mais elles ne sont pas appliquées. Exemple des logs que j’obtiens :

[09:26:53] File /home/cms/project/themes/starter/gulpconf.json was changed [09:26:53] Starting 'clear_vendor_cache'... [09:26:53] Finished 'clear_vendor_cache' after 1.56 ms [09:26:53] Starting 'js'... [09:26:53] Finished 'js' after 4.67 ms

1
2
3
4
5

[09:26:53] File /home/cms/project/themes/starter/gulpconf.json was changed
[09:26:53] Starting 'clear_vendor_cache'...
[09:26:53] Finished 'clear_vendor_cache' after 1.56 ms
[09:26:53] Starting 'js'...
[09:26:53] Finished 'js' after 4.67 ms

Solution :

A partir du JSON fourni plus haut, dans le gulpfile.js placer ces différentes parties :

var appFiles = { scripts: [paths.scripts.src + '*.js', './gulpconf.json'] };

1
2
3

var appFiles = {
  scripts: [paths.scripts.src + '*.js', './gulpconf.json']
};

var fs = require('fs'); var gulpconf = "./gulpconf.json";

1
2

var fs = require('fs');
var gulpconf = "./gulpconf.json";

gulp.task('js:vendor',function(){ var json = JSON.parse(fs.readFileSync(gulpconf)), vendorjs = json.js.vendor; gulp.src(vendorjs) .pipe(plugins.uglify()) .pipe(plugins.rename(function(opt) { opt.basename = opt.basename.replace(/\./g,'-'); return opt; })) .pipe(plugins.size()) .pipe(gulp.dest(paths.scripts.dest)); }); gulp.task('js:custom', function() { gulp.src(paths.scripts.src + '*.js') .pipe(plugins.uglify()) .pipe(plugins.rename(function(opt) { opt.basename = opt.basename.replace(/\./g,'-'); return opt; })) .pipe(plugins.size()) .pipe(gulp.dest(paths.scripts.dest)); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

gulp.task('js:vendor',function(){
  var json = JSON.parse(fs.readFileSync(gulpconf)),
  vendorjs = json.js.vendor;

  gulp.src(vendorjs)
    .pipe(plugins.uglify())
    .pipe(plugins.rename(function(opt) {
      opt.basename = opt.basename.replace(/\./g,'-');
      return opt;
    }))
    .pipe(plugins.size())
    .pipe(gulp.dest(paths.scripts.dest));
});

gulp.task('js:custom', function() {
  gulp.src(paths.scripts.src + '*.js')
    .pipe(plugins.uglify())
    .pipe(plugins.rename(function(opt) {
      opt.basename = opt.basename.replace(/\./g,'-');
      return opt;
    }))
    .pipe(plugins.size())
    .pipe(gulp.dest(paths.scripts.dest));
});

gulp.task('watch', ['sprite:svg', 'style', 'js:vendor', 'js:custom'], function(){ gulp.watch('./src/images/sprites/svg/*.svg', ['sprite:svg']); gulp.watch(appFiles.styles, ['style']).on('change', function(evt) { changeEvent(evt); }); gulp.watch(appFiles.scripts, ['js:vendor', 'js:custom']).on('change', function(evt) { changeEvent(evt); }); gulp.watch(paths.sprite.src, ['sprite']).on('change', function(evt) { changeEvent(evt); }); });

1
2
3
4
5
6
7
8
9
10
11
12

gulp.task('watch', ['sprite:svg', 'style', 'js:vendor', 'js:custom'], function(){
  gulp.watch('./src/images/sprites/svg/*.svg', ['sprite:svg']);
  gulp.watch(appFiles.styles, ['style']).on('change', function(evt) {
    changeEvent(evt);
  });
  gulp.watch(appFiles.scripts, ['js:vendor', 'js:custom']).on('change', function(evt) {
    changeEvent(evt);
  });
  gulp.watch(paths.sprite.src, ['sprite']).on('change', function(evt) {
    changeEvent(evt);
  });
});

[Gulp] Des icônes au format SVG dans vos projets avec gulp-svgstore

23/03/2017 / admin

Voir une autre approche avec gulp-svg-sprites qui génère un sprite SVG et une feuille SASS avec des mixins prêts à l’emploi.

Des tutos sur la mise en place de sprites SVG avec gulp et le plug-in gulp-svgstore:

Icon System with SVG Sprites sur css-tricks.com.

Gulp svgstore – Combine svg files into one with elements.

SVG Icon Systems with Gulp.

My current SVG techniques and workflow, avec exemple d’icônes animées via les transitions CSS.

Creating SVG Sprites Using Gulp sur YouTube.

https://codegists.com/code/svg-sprites-tutorial/

A Complete Guide To Implementing An SVG Icon System

SVG ICON WORKFLOW FOR JEKYLL WITH GULP

Obtenir un guide de styles des icônes générées:

Using Svg Symbol Map With SC5 Style Guide Generator

A11Y Style Guide – This application is a living style guide, generated from KSS documented styles…with an accessibility twist.

Des ressources à propos de SVG:

Inline SVG vs Icon Fonts [CAGEMATCH]

Colored SVG Sprite, Quick Tip: SVG Style Two Colors

[Gulp] Gulpfile.js – Les bonnes pratiques de coding

14/12/2016 / admin

Patterns et recettes

gulp patterns – Playground for Gulp Recipes

Using external config file

Split tasks across multiple files

Des workflows Gulp sous GitHub

The Zephir GULP workflow. http://zephir.ch (découpé en tâches)

WordPressify v0.1.3. A build system designed to automate your WordPress development workflow.

Gulp workflow for front-end development – modules exports, etc… un bon boilerplate.

La gulpfile de Foundation for Sites

Curated list of useful gulp plugins for awesome and easy frontend web development.

Building a Better Gulpfile

Advanced Gulp File, repo Git, sprites SVG.

My Advanced Gulp Workflow for WordPress Themes

Introduction à Gulp par Putain de Code !

Introduction to Gulp.js with practical examples

Importer et étendre Foundation for Sites 6

Après mise à jour de la police d’icônes, ce n’est pas la bonne police qui s’affiche

Une solution à mettre en place via Gulp

Ce n’est pas la bonne icône qui s’affiche sous Chrome

Ajouter les sources de Modernizr comme dépendances NPM

gulpconf.json

Connaître les options requises en fonction des features qu’on souhaite embarquer

gulpfile.js

Exemple d’utilisation de l’option includePaths de gulp-sass avec les sources SCSS de Foundation 6 for Sites

gulpconf.json

gulpfile.js

main.scss

Ressources en ligne:

Gulp – make one sprite per folder

Créer un sprite bitmap (PNG, JPG) par dossier

Spritesmith : Multiple spritesheets, one css file?

Error: Cannot find module ‘gulp.spritesmith’

Problème

Solution

Optimiser ce code en passant par une fonction

Problématique :

Solution :

Des tutos sur la mise en place de sprites SVG avec gulp et le plug-in gulp-svgstore:

Obtenir un guide de styles des icônes générées:

Des ressources à propos de SVG:

Patterns et recettes

Des workflows Gulp sous GitHub

Exemple d’utilisation de l’option `includePaths` de gulp-sass avec les sources SCSS de Foundation 6 for Sites