Un simple flux de travail Gulp & # x27;

Les plats clés

• Un flux de travail Gulp peut améliorer le temps de compilation SASS dans les projets de grands rails, s'éloigner du pipeline d'actifs et embrasser la vitesse de Libsass.
• Le flux de travail Gulp comprend la compilation SASS avec Libsass, générer des sourcemaps pour un débogage plus facile, préfixant CSS avec autopréfixer et générer de la documentation SASS avec Sassdoc.
• Le flux de travail peut être encore optimisé en ajoutant une tâche de montre qui surveille les modifications de styles de styles pour les recompiler, éliminant la nécessité d'exécuter manuellement la tâche SASS après chaque enregistrement de fichier.
• Une tâche «prod» peut être créée pour le déploiement dans la production, qui compile le SASS en mode compressé, préfixent les CS avec autopréfixer, régénère la documentation SASSDOC et évite les sourcemaps.

J'ai récemment été chargé d'optimiser le côté SASS d'un projet assez grand Rails, et l'une des choses les plus importantes à faire a été d'améliorer le temps de compilation. En raison de l'architecture SASS en place et du fait que Ruby Sass (à travers le pipeline d'actifs Rails dans ce cas) a tendance à être lent lorsqu'il s'agit d'un grand nombre de fichiers, cela pourrait prendre jusqu'à 40 secondes pour compiler les feuilles de style. Parler d'un processus de développement rapide. :)

Mon idée était de s'éloigner du pipeline des actifs et d'embrasser la vitesse de Libsass. Pour faciliter les choses, j'ai décidé d'aller avec un simple flux de travail Gulp. C'était la première fois que j'utilisais Gulp, et je dois dire que c'était une expérience assez agréable (ce qui n'était pas le cas pour le grognement en ce qui me concerne).

Dans ce court article, faisons juste une visite rapide sur la façon de créer un flux de travail Gulp’y pour travailler avec Sass. Voici ce que nous inclurons:

• Sans surprise, compilation SASS avec Libsass
• Génération de sourcemaps pour un débogage plus facile
• Préfixation de CSS avec autoprefixer
• Génération de la documentation SASS avec SASSDOC

compilation sass

Regardez Atoz: Sass Apprenez la lettre Sass par lettre Regardez ce cours Regardez ce cours

La première chose à faire est d'installer les dépendances et de créer un gulpfile.js. Nous aurons besoin de Gulp (pas de merde, Sherlock), mais aussi Gulp-Sass pour compiler nos feuilles de style:

$ <span>npm install gulp gulp-sass --save-dev</span>

Cette ligne indique à NPM d'installer les packages Gulp et Gulp-Sass comme dépendances de développement. Vous pouvez désormais les trouver dans l'objet DevDependces de votre package.json. Et le gulpfile.js:

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');</span>

wow, c'était court. Ce dont nous avons besoin maintenant, c'est une tâche pour exécuter le sass (en fait gulp-sass) sur notre dossier de styles de styles.

$ <span>npm install gulp gulp-sass --save-dev</span>

c'est tout! Nous pouvons désormais compiler nos feuilles de style en utilisant Libsass grâce à une tâche gorgée très minimale. Et ça? Nous pouvons transmettre des options à Gulp-Sass pour compiler les feuilles de styles en mode élargi et pour imprimer des erreurs dans la console:

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');</span>

ajoutant des sourcemaps

Jusqu'à présent, tout va bien. Maintenant, qu'en est-il de générer des sourcemaps? Dans le cas où vous ne savez pas ce que sont Sourcemaps, c'est essentiellement un moyen de cartographier des sources de production compressées avec des sources de développement élargies afin de faciliter le débogage du code en direct. Ils ne sont pas du tout limités au CSS, Sourcemaps peut également être utilisé en JavaScript.

Nous avons un bel article sur Sourcemaps ici à SitePoint. N'hésitez pas à vous lire avant de continuer si vous vous sentez un peu court sur la compréhension des sourcemaps.

D'accord, donc pour ajouter une génération Sourcemaps à notre tâche, nous devons installer Gulp-Sourcemaps:

<span>var input = './stylesheets/**/*.scss';
</span><span>var output = './public/css';
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>// Find all `.scss` files from the `stylesheets/` folder
</span>    <span>.src(input)
</span>    <span>// Run Sass on those files
</span>    <span>.pipe(sass())
</span>    <span>// Write the resulting CSS in the output folder
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

et maintenant optimiser notre tâche:

<span>var sassOptions = {
</span>  <span>errLogToConsole: true,
</span>  <span>outputStyle: 'expanded'
</span><span>};
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Par défaut, Gulp-SourceMaps écrit le SourceMaps en ligne dans les fichiers CSS compilés. Selon la configuration du projet, nous pourrions vouloir les écrire dans des fichiers séparés, auquel cas nous pouvons spécifier un chemin par rapport à la destination gulp.dest () dans la fonction sourcemaps.write () comme:

$ <span>npm install gulp-sourcemaps --save-dev</span>

Amener l'autopréfixeur à la fête

Je n'entrerai pas dans les détails de la raison pour laquelle l'utilisation d'autoprefixer est meilleure que d'écrire un fournisseur à la main (ou avec un mixin qui est fondamentalement la même chose), mais à peu près automatique Styleshets pour ajouter des préfixes pertinents en fonction d'une base de données à jour et d'une configuration donnée. En d'autres termes, vous indiquez à AutopRefixer quels navigateurs vous souhaitez prendre en charge, et il ajoute uniquement des préfixes pertinents aux feuilles de style. Effort zéro, soutien parfait (veuillez me rappeler de breveter ce slogan).

Pour inclure l'autopréfixer dans notre flux de travail Gulp’y, nous en avons seulement besoin pour pipe après que Sass ait fait son travail. Puis AutopRefixer met à jour les feuilles de styles pour ajouter des préfixes.

Tout d'abord, installons-le (vous obtenez l'essentiel maintenant):

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');
</span><span>var sourcemaps = require('gulp-sourcemaps');
</span>
<span>// ... variables
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sourcemaps.init())
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(sourcemaps.write())
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Ensuite, nous l'ajoutons à notre tâche:

gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sourcemaps.init())
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(sourcemaps.write('./stylesheets/maps'))
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

En ce moment, nous exécutons avec la configuration par défaut à partir de l'autopréfixer qui est

• navigateurs avec plus de 1% de part de marché,
• Dernières 2 versions de tous les navigateurs,
• Firefox ESR,
• opéra 12.1

Nous pouvons utiliser notre propre configuration comme ainsi:

$ <span>npm install gulp-autoprefixer --save-dev</span>

Libérez les documents!

Le dernier, mais non le moindre, à ajouter à notre workflow, génération de documentation SASS avec SASSDOC. SASSDOC est pour Sass ce que JSDOC est à JavaScript: un outil de documentation. Il analyse vos feuilles de style à la recherche de blocs de commentaires documentant les variables, les mixins, les fonctions et les espaces réservés.

Si votre projet utilise SASSDOC (il devrait!), Vous pouvez ajouter la génération de documentation automatique dans votre flux de travail Gulp.

La chose cool avec SASSDOC est qu'elle peut être tuée directement dans Gulp car son API est compatible Gulp. Vous n'avez donc pas vraiment de plugin Gulp-Sassdoc.

$ <span>npm install gulp gulp-sass --save-dev</span>

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');</span>

Notez que selon la taille de votre projet et le nombre d'articles documentés, Sassdoc peut prendre jusqu'à quelques secondes pour fonctionner (rarement au-dessus de 3 pour autant que je remarque), donc vous voudrez peut-être avoir un tâche séparée pour cela.

<span>var input = './stylesheets/**/*.scss';
</span><span>var output = './public/css';
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>// Find all `.scss` files from the `stylesheets/` folder
</span>    <span>.src(input)
</span>    <span>// Run Sass on those files
</span>    <span>.pipe(sass())
</span>    <span>// Write the resulting CSS in the output folder
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Encore une fois, nous utilisons la configuration par défaut, mais nous pouvons utiliser la nôtre si nous le voulons.

<span>var sassOptions = {
</span>  <span>errLogToConsole: true,
</span>  <span>outputStyle: 'expanded'
</span><span>};
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Je vous regarde

Il y a encore quelque chose que nous pouvons faire avant de partir: créer une tâche de montre. Le but de cette tâche serait de surveiller les changements de styles de styles pour les recompiler à nouveau. Il est très pratique lorsque vous travaillez du côté SASS du projet, vous n'avez donc pas à exécuter la tâche SASS à chaque fois que vous enregistrez un fichier.

$ <span>npm install gulp-sourcemaps --save-dev</span>

Voici une autre raison pour laquelle je recommande de ne pas inclure Sassdoc dans la tâche SASS: vous ne voulez probablement pas régénérer les documents chaque fois que vous touchez une feuille de style. C'est probablement quelque chose que vous voulez faire sur la construction ou la poussée, peut-être avec un crochet pré-engagé.

ajoutant le toucher final

Une dernière chose, mais importante, à penser: l'exécution de Sass dans la tâche par défaut.

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');
</span><span>var sourcemaps = require('gulp-sourcemaps');
</span>
<span>// ... variables
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sourcemaps.init())
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(sourcemaps.write())
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Le tableau passé comme deuxième argument de la fonction de tâche (..) est une liste des tâches de dépendance. Fondamentalement, il dit à Gulp d'exécuter ces tâches avant d'exécuter celle spécifiée comme un troisième argument (le cas échéant).

De plus, nous pourrions probablement créer une tâche prod qui pourrait être exécutée juste avant de se déployer en production (peut-être avec un crochet Git). Cette tâche devrait:

• compiler les sass en mode compressé
• Préfixe CSS avec AutopRefixer
• Régénérer la documentation SASSDOC
• Évitez tout Sourcemaps

gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sourcemaps.init())
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(sourcemaps.write('./stylesheets/maps'))
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Réflexions finales

c'est ça les gens! En quelques minutes et quelques lignes de JavaScript, nous avons réussi à créer un puissant petit flux de travail Gulp. Vous pouvez trouver le fichier complet ici. Qu'a-t-il ajouter à lui?

Des questions fréquemment posées (FAQ) sur Gulp et Sass Workflow

Comment installer Gulp et Sass pour mon projet?

Pour installer Gulp et Sass pour votre projet, vous devez faire installer Node.js et NPM sur votre ordinateur. Une fois que vous en avez, vous pouvez installer Gulp Globally en exécutant la commande NPM Install - Global Gulp-Cli dans votre terminal. Après cela, accédez à votre répertoire de projet et exécutez NPM init pour créer un fichier package.json. Ensuite, installez Gulp et Gulp-Sass dans votre projet en exécutant l'installation de NPM --Save-Dev Gulp Gulp-Sass.

Comment compiler mes fichiers SASS à l'aide de Gulp?

Pour compiler vos fichiers SASS à l'aide de Gulp, vous devez créer une tâche Gulp. Dans votre gulpfile.js, vous pouvez créer une tâche nommée «SASS» qui compilera vos fichiers SASS en CSS. Voici un exemple simple de la façon de procéder:

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

gulp.task ('sass', function () {
return gulp.src ('./ sass / ** / *. Scss ')
.Pipe (sass (). sur (' error ', sass.logerror))
.pipe (gulp.dest (' ./ css '));
}) ;

Cette tâche prendra tous les fichiers .SCSS dans votre répertoire SASS, les compilera dans CSS à l'aide de Gulp-Sass et publient les fichiers CSS résultants dans votre Répertoire CSS.

Comment puis-je surveiller les modifications de mes fichiers SASS et les compiler automatiquement?

Gulp fournit une méthode appelée Watch que vous pouvez utiliser pour exécuter automatiquement les tâches chaque fois que les fichiers sont modifiés. Voici comment vous pouvez modifier la tâche «sass» pour surveiller les modifications:

gulp.task ('sass', function () {
gulp.watch ('./ sass / * * / *. scsss', ['sass']);
});

Maintenant, chaque fois que vous enregistrez un fichier .scss dans votre répertoire SASS, la tâche «sass» s'exécutera automatiquement et compilera vos fichiers SASS dans CSS.

Comment gérer les erreurs dans mes fichiers SASS?

Lors de la compilation de fichiers SASS, vous pouvez rencontrer des erreurs de syntaxe. Vous pouvez gérer ces erreurs en utilisant la méthode ON fournie par Gulp-Sass. Voici comment vous pouvez modifier la tâche «sass» pour enregistrer les erreurs:

gulp.task ('sass', function () {
return gulp.src ('./ sass / ** / *. SCSS ')
.Pipe (sass (). sur (' error ', sass.logerror))
.Pipe (gulp.dest ('./ css'));
});

Maintenant, chaque fois qu'il y a une erreur de syntaxe dans vos fichiers SASS, Gulp-Sass enregistrera l'erreur et continuera avec le tâche.

Comment utiliser Gulp pour miniver mes fichiers CSS?

Pour minimiser vos fichiers CSS, vous pouvez utiliser un plugin Gulp appelé Gulp-Clean-CSS. Tout d'abord, installez-le dans votre projet en exécutant NPM Installer --Save-Dev Gulp-Clean-CSS. Ensuite, vous pouvez créer une tâche qui divisera vos fichiers CSS:

var cleritcss = require ('gulp-cllean-css');

gulp.task ('minify-css', () => {
return gulp.src ('Styles / *. CSS')
.Pipe (CleanCss ({compatibilité: 'ie8'}))
.pipe (gulp.dest ('dist'));
});

Cette tâche prendra tous Gulp-Clean-CSS et Sortie les fichiers CSS minifiés résultants dans votre répertoire DIST.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!