Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Проблема при сборке файлов .styl #32

Closed
yura-master-web opened this issue Feb 9, 2020 · 2 comments
Closed

Проблема при сборке файлов .styl #32

yura-master-web opened this issue Feb 9, 2020 · 2 comments

Comments

@yura-master-web
Copy link

Подскажите, что я делаю не так, из документации не очень понятно, как правильно настроить gulp сборщик для работы с .styl файлами (stylus).
Мой конфиг.
Файл watch.js

import gulp from 'gulp';
// import runSequence from 'run-sequence';
import {get as browserSync} from 'browser-sync';
import {styles, stylesLint} from './styles';
import {templates, templatesLint} from './templates';
import {scriptsWatch} from './scripts';
import {icons} from './icons';

const bs = browserSync('server');
const reload = done => {
    bs.reload();
    done();
};

export const watch = () => {
    global.watch = true;

    gulp.watch(
        'app/{styles,blocks}/**/*.styl',
        gulp.series(styles, stylesLint)
    ).on('all', (event, filepath, stats) => {
        global.emittyChangedFile = {
            path: filepath,
            stats
        };
    });
};

Файл styles.js

import gulp from 'gulp';
import plumber from 'gulp-plumber';
import gulpIf from 'gulp-if';
import rupture from 'rupture';
import stylint from 'gulp-stylint';
import stylus from 'gulp-stylus';
import importIfExist from 'stylus-import-if-exist';
import autoprefixer from 'autoprefixer-stylus';
import gcmq from 'gulp-group-css-media-queries';
import nano from 'gulp-cssnano';
import rename from 'gulp-rename';
import sourcemaps from 'gulp-sourcemaps';
import errorHandler from 'gulp-plumber-error-handler';

const emitty = require('emitty').setup('app/styles', 'stylus');

const isDebug = process.env.NODE_ENV !== 'production';

export const styles = () =>
    gulp
        .src('app/styles/*.styl', {read: false})
        .pipe(
            gulpIf(
                global.watch,
                emitty.stream(
                    global.emittyChangedFile.path,
                    global.emittyChangedFile.stats
                )
            )
        )
        .pipe(plumber({errorHandler: errorHandler('Error in "styles" task')}))
        .pipe(gulpIf(isDebug, sourcemaps.init()))
        .pipe(
            stylus({
                use: [importIfExist(), rupture(), autoprefixer()],
                'include css': true,
                define: {
                    // dev-mode variable for using in stylus
                    __DEV__: isDebug
                }
            })
        )
        .pipe(gulpIf(!isDebug, gcmq()))
        .pipe(gulpIf(!isDebug, nano({zindex: false})))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulpIf(isDebug, sourcemaps.write()))
        .pipe(gulp.dest('dist/assets/styles'));
@mrmlnc
Copy link
Owner

mrmlnc commented Feb 10, 2020

Привет,

Stylus не поддерживается в новой версии emitty. Список поддерживаемых языков. Я создам запрос на эту функциональность.

@mrmlnc
Copy link
Owner

mrmlnc commented Feb 10, 2020

Прямо сейчас можно написать свой провайдер для stylus, используя инструкцию.

Альтернативный вариант — использовать emitty@1, но поддержка 1-ой версии больше не осуществляется.

@mrmlnc mrmlnc closed this as completed Feb 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants