Использование .styl файла в зависимости компилировать другой

Question

У меня есть два файла:

1 - common.styl (этот файл имеет импорт, который будет использоваться на всех страницах моего проекта.)

@import 'utils/variables.styl' 
@import 'utils/fonts.styl' 
@import 'utils/mixin.styl' 

2 - home.styl (этот файл является только для домашнего раздела моего проекта и зависит от common.styl)

body 
    font-family CoolDown 
    .box 
    background $commonBg 

В мой gulpfile Я создал две задачи: один для компиляции common.styl и другого для компиляции всех страниц моего проекта.

Общая задача:

gulp.task('commonCSS', function() { 
    return gulp.src('src/styles/common.styl') 
    .pipe($.plumber()) 
    .pipe($.stylus({ 
     'include css': true, 
     use: [jeet(), nib(), rupture()], 
     import: ['jeet', 'nib', 'rupture'] 
    })) 
    .pipe($.autoprefixer(stylBrowsers)) 
    .pipe(gulp.dest(paths.build + 'css')) 
    .pipe(reload({ stream: true })); 
}); 

Моя проблема заключается задача страниц, это работает только тогда, когда я положил файл common.styl на пути Src и Concat их. Но для этого мне нужно указать имя в файле. Я хотел бы использовать имя текущего .styl, скомпилированного.

gulp.task('pagesCSS', ['commonCSS'], function() { 
    return gulp.src(['src/styles/common.styl', 'src/styles/pages/**/*.styl']) 
    .pipe($.plumber()) 
    .pipe($.concat('**page.css**') 
    .pipe($.stylus({ 
     'include css': true, 
     use: [ jeet(), nib(), rupture() ], 
     import: ['jeet', 'nib', 'rupture'] 
    })) 
    .pipe($.autoprefixer(stylBrowsers)) 
    .pipe($.minifyCss()) 
    .pipe(gulp.dest(paths.build + 'css')) 
    .pipe(reload({ stream: true })); 
}); 

Вопрос: Существует способ включить common.styl для использования задачей pagesCSS?

Возможно, я что-то упустил или использовал неправильное решение здесь.

Answer 1

Не можете ли вы просто @import или @require common.styl в этих файлах? @import "../../common" и Stylus будут включать их для каждой страницы, не нужно concat.

Или ...

Вы можете использовать import вариант вы уже имеете в своем объекте конфигурации. Stylus будет включать common.styl в начале каждого файла.

Сначала добавьте paths: ['node_modules', 'src/styles']. Таким образом, Stylus будет знать, как разрешать пути для импорта. Вероятно, вы можете пропустить этот шаг, если вы предоставите полный путь в следующем.

Теперь вы можете добавить свой common.styl в import: ['jeet', 'nib', 'rupture', 'common'].

Я использую эту конфигурацию для своих переменных, поэтому мне не нужно включать их в каждый файл.

Полный пример должен выглядеть примерно так, что:

gulp.task('pagesCSS', ['commonCSS'], function() { 
    return gulp.src('src/styles/pages/**/*.styl') // <-- only pages styles are piped 
    .pipe($.plumber()) 
    // .pipe($.concat('**page.css**')    // <-- remove this line 
    .pipe($.stylus({ 
     'include css': true, 
     use: [ jeet(), nib(), rupture() ], 
     paths: ['node_modules', 'src/styles']  // <-- resolve your styles path 
     import: ['jeet', 'nib', 'rupture', 'common'] // <-- add your shared file 
    })) 
    .pipe($.autoprefixer(stylBrowsers)) 
    .pipe($.minifyCss()) 
    .pipe(gulp.dest(paths.build + 'css')) 
    .pipe(reload({ stream: true })); 
});