Не можете заставить GulpFile вести себя так, как я хочу, чего-то не хватает?

Попытка настроить глоток, и один из шагов расстраивает. Я следую учебному пособию и не могу заставить его работать правильно.

https://css-tricks.com/gulp-for-beginners/

По сути, я хочу создать задачу сборки, которая компилирует sass, объединяет файлы css, минимизирует ее и выводит в общую папку. Вот мой код для моего index.html. (Упрощенный).

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--build:css css/styles.min.css -->
    <link rel="stylesheet" href="scss/styles.scss">
    <!-- endbuild -->
</head>

<body>

</body>

</html>

Теперь вот мой Gulpfile.js

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    useref = require('gulp-useref'), // Use to concatenate files
    gulpIf = require('gulp-if'),
    cssnano = require('gulp-cssnano'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    imagecache = require('gulp-cache'),
    del = require('del'),
    runsequence = require('run-sequence');


/* ********************************* */
// PRODUCTION TASKS ONLY \\


/*Used to start with a clean slate on the public folder */
gulp.task('clean:public', function () { 
    return del.sync('public');
})

gulp.task('watch:prod', function () {
    gulp.watch('src/scss/**/*.scss', ['sass']);
});

gulp.task('sass:prod', function () {
    return gulp.src('src/scss/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('public/css'))
});

gulp.task('useref:prod', function () {
    return gulp.src('src/*.html')
        .pipe(useref())
        .pipe(gulpIf('*.js', uglify()))
        .pipe(gulpIf('*.css', cssnano()))
        .pipe(gulp.dest('public'));
});

gulp.task('images:prod', function () {
    return gulp.src('src/images/**/*.+(png|jpg|gif|svg)')
    .pipe(imagecache(imagemin([
    imagemin.gifsicle({interlaced: true}),
    imagemin.jpegtran({progressive: true}),
    imagemin.optipng({optimizationLevel: 5}),
    imagemin.svgo({plugins: [{removeViewBox: true}]})
])))
    .pipe(gulp.dest('public/images'));
});

gulp.task('cssimages:prod', function () {
    return gulp.src('src/css/cssimages/**/*.+(png|jpg|gif|svg)')
    .pipe(imagecache(imagemin([
    imagemin.gifsicle({interlaced: true}),
    imagemin.jpegtran({progressive: true}),
    imagemin.optipng({optimizationLevel: 5}),
    imagemin.svgo({plugins: [{removeViewBox: true}]})
])))
    .pipe(gulp.dest('public/css/cssimages'));
});

/* BRING EVERYTHING TOGETHER */

gulp.task('build:prod', function (callback){
    runsequence
        (
            'clean:public',
            ['sass:prod','useref:prod','images:prod', 'cssimages:prod'], 
            callback
        )
})

Согласно учебнику, это должно создать файл в общей папке в css names styles.min.css

Этот файл также должен быть скомпилирован из sass. Я сделал пример styles.scss и внутри него у меня есть.

$bgcolor : yellow;
body {
    background: $bgcolor;
}

div {
    width: 100px;
    height: 20px;
}

Когда я запускаю gulp build:prod, это выводится в файле styles.min.css.

$bgcolor:#ff0;body{background:$bgcolor}div{width:100px;height:20px}

Файлы минимизируются нормально, но я не могу заставить sass работать правильно и компилировать при использовании задачи сборки.

Структура папок

^^^ Как видите, вместо сортировки файла и последующей конкатенации файла создается 2 файла. Я пытаюсь сначала выполнить gulp sass, а затем useref переместить файл в общую папку и переименовать его в styles.min.css.

Кажется, я что-то упускаю или не могу найти / направить в нужные папки?

Если я запускаю gulp sass: prod, он работает нормально. Но я не могу заставить мою задачу работать правильно, я в тупике.

Источник

2 ответа

Решение

Из статьи, которую вы упомянули,

Gulp-useref объединяет любое количество файлов CSS и JavaScript в один файл, ища комментарий, начинающийся с "". Его синтаксис:

<!-- build:<type> <path> --> ... HTML Markup, list of script / link tags. <!-- endbuild -->

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

Согласно документу вы указали следующее.

<!--build:css css/styles.min.css -->
    <link rel="stylesheet" href="scss/styles.scss">
<!-- endbuild -->

Так что useref скопирует стили из styles.scss и создаст styles.min.css и вставит стили scss. Вот почему вы получаете стили scss в минимизированном styles.min.css

Чтобы достичь того, чего вы хотели, вам нужно изменить путь sass:prod dest, как показано ниже.

gulp.task('sass:prod', function () {
    return gulp.src('src/scss/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('src/css'))
});

и в HTML, вы должны ссылаться на файл CSS.

<!--build:css css/styles.min.css -->
   <link rel="stylesheet" href="css/styles.css">
<!-- endbuild -->

А также, как указано в @Mark, лучше изменить последовательность выполнения, чтобы убедиться, что задача sass:prod завершена перед задачей useref:prod.

gulp.task('build:prod', function (callback){
    runsequence
        (
            'clean:public','sass:prod',
            ['useref:prod','images:prod', 'cssimages:prod'], 
            callback
        )
})
Источник

Из документа последовательности выполнения:

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

Итак, в вашем массиве задач:

['sass:prod','useref:prod','images:prod', 'cssimages:prod'],

эти задачи выполняются параллельно. Нет никакой гарантии, что задача 'sass: prod' будет выполнена раньше, чем задача 'useref: prod'. Если вы хотите, чтобы это произошло, измените на:

gulp.task('build:prod', function (callback){
runsequence
    (
        'clean:public',
        'sass:prod',
        ['useref:prod','images:prod', 'cssimages:prod'], 
        callback
    )
})
Источник
Другие вопросы по тегам