Как настроить перо с Gulp

Если вам нравится использовать Stylus и Gulp, вот как вы можете настроить nib библиотеки микширования CSS3 для процесса сборки.

Установить перо

Сначала вы хотите установить перо.

npm install --save-dev nib

Нам нужен nib в нашем gulpfile.js.

var nib = require('nib');

Там, где мы перетаскиваем перо, указываем свойство использования, которое вызывает перо

gulp.task(‘stylus’, function () {
    return gulp.src(‘assets/styl/*.styl’)
       .pipe(stylus({
           compress: true,
           use: nib()
    }))
    .pipe(gulp.dest(‘assets/css’));
});

Как может выглядеть базовый файл gulpfile.js.

var gulp   = require(‘gulp’),
    stylus = require(‘gulp-stylus’),
    watch  = require(‘gulp-watch’),
    nib    = require(‘nib’);
gulp.task(‘default’, [‘stylus’]);
// Stylus
gulp.task(‘stylus’, function () {
    return gulp.src(‘assets/styl/*.styl’)
        .pipe(stylus({
            compress: true,
            use: nib()
        }))
       .pipe(gulp.dest(‘assets/css’));
});
// Watch Files For Changes
gulp.task(‘watch’, function() {
    gulp.watch(‘assets/styl/*.styl’, [‘stylus’]);
});

Использование пера

Мне нравится включать перо в начало моего основного файла стилуса, куда я все импортирую.

Вот как вам потребуется перо.

@require ‘nib’

Вы можете потребовать отдельные файлы пера.

@require ‘nib/gradients’

перо документация, где вы можете увидеть доступные миксины и примеры

(Вместо использования @import мы используем здесь @require. Оба работают одинаково, за исключением того, что @require импортирует файл один раз. Более подробную информацию можно найти здесь.)

После того, как мне понадобится перо, я хочу сбросить настройки.

global-reset()

Это должно подготовить вас к тому, чтобы начать писать стилусом с наконечником.