Задать вопрос
Koiiiak
@Koiiiak

Почему не работает таск в Gulp?

Таск debug:build не хочет запускаться. Пробовал два склейщика файлов gulp-rigger и gulp-file-include. С первым работает нормально, но нет возможности включать файлы разных расширений, а именно css в scss. Со вторым каждый таск, включенный в debug:build отлично работает по отдельности, но debug:build не хочет работать. А какие еще есть способы включить css в scss? Именно как кусок кода, чтобы на выходе один файл был.
Кусок Gulpfile.js:
var gulp = require('gulp'),   //Подключаемые пакеты
    watch = require('gulp-watch'),
    sourcemaps = require('gulp-sourcemaps'),
    sass = require('gulp-sass'),
    prefixer = require('gulp-autoprefixer'),
    uglify = require('gulp-uglify'),
//    rigger = require('gulp-rigger'),
    fileinclude = require('gulp-file-include'),
    cssmin = require('gulp-csso'),
    htmlmin = require('gulp-htmlmin'),
    imagemin = require('gulp-imagemin'),
    clean = require('gulp-clean'),
    browserSync = require('browser-sync'),
    reload = browserSync.reload,
    include = fileinclude({
      prefix: '@@',
      basepath: '@file'
    });

var path = { //Рабочая папка с сайтом
  demo: { //Дебаг версия
    root: 'demo/',
    html: 'demo/',
    css: 'demo/styles/',
    js: 'demo/js/',
    img: 'demo/img/',
    fonts: 'demo/fonts/'
  },
  src: { //Исходники
    root: 'src/',
    html: 'src/',
    css: 'src/styles/',
    js: 'src/js/',
    img: 'src/img/',
    fonts: 'src/fonts/'
  },
  release: { //Финальная версия с минифицированными файлами
    root: 'release/',
    html: 'release/',
    css: 'release/styles/',
    js: 'release/js/',
    img: 'release/img/',
    fonts: 'release/fonts/'
  },
  watch: { //Папки и файлы для наблюдения
    html: 'src/**/*.html',
    css: 'src/styles/**/*.*',
    js: 'src/js/**/*.*',
    img: 'src/img/**/*.*',
    fonts: 'src/fonts/**/*.*'
  }
};
gulp.task('html:build', function () {
  gulp.src(path.src.html + '**/*.html')
      .pipe(sourcemaps.init())
      .pipe(include)
      .pipe(sourcemaps.write())
      .pipe(gulp.dest(path.demo.html))
      .pipe(reload({stream: true}));
});

gulp.task('js:build', function () {
  gulp.src(path.src.js + '**/*.js')
      .pipe(sourcemaps.init())
      .pipe(include)
      .pipe(sourcemaps.write())
      .pipe(gulp.dest(path.demo.js))
      .pipe(reload({stream: true}));
});

gulp.task('style:build', function () {
  gulp.src(path.src.css + '**/*.scss')
      .pipe(sourcemaps.init())
      .pipe(include)
      .pipe(sass())
      .pipe(prefixer())
      .pipe(sourcemaps.write())
      .pipe(gulp.dest(path.demo.css))
      .pipe(reload({stream: true}));
});

gulp.task('image:min', function () {
  gulp.src(path.src.img + '**/*.*')
      .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}]
      }))
      .pipe(gulp.dest(path.demo.img))
      .pipe(reload({stream: true}));
});

gulp.task('fonts:build', function() {
  gulp.src(path.src.fonts + '**/*.*')
      .pipe(gulp.dest(path.demo.fonts))
});

gulp.task('clean', function () {
  gulp.src(path.demo.root + '*')
      .pipe(clean());
  gulp.src(path.release.root + '*')
      .pipe(clean());
});

gulp.task('debug:build', [
    'clean',
    'html:build',
    'style:build',
    'js:build',
    'image:min',
    'fonts:build'
]);

-------------
Забыл приложить ошибку:
"C:\Program Files (x86)\JetBrains\WebStorm 11.0.3\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" C:\Users\serj-\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js --color --gulpfile w:\Dropbox\WEB\ivan\Gulpfile.js debug:build
[22:27:39] Using gulpfile w:\Dropbox\WEB\ivan\Gulpfile.js
[22:27:39] Starting 'clean'...
[22:27:39] Finished 'clean' after 11 ms
[22:27:39] Starting 'html:build'...
[22:27:39] Finished 'html:build' after 3.33 ms
[22:27:39] Starting 'style:build'...
[22:27:39] Finished 'style:build' after 1.44 ms
[22:27:39] Starting 'js:build'...
[22:27:39] Finished 'js:build' after 917 μs
[22:27:39] Starting 'image:min'...
[22:27:39] Finished 'image:min' after 1.26 ms
[22:27:39] Starting 'fonts:build'...
[22:27:39] Finished 'fonts:build' after 504 μs
[22:27:39] Starting 'debug:build'...
[22:27:39] Finished 'debug:build' after 2.46 μs
[22:27:39] gulp-imagemin: Minified 0 images

events.js:141
      throw er; // Unhandled 'error' event
      ^
Error: demo\js\contacts.html
Error: Invalid CSS after "": expected 1 selector or at-rule, was "<!DOCTYPE html>"
        on line 1 of stdin
>> <!DOCTYPE html>
   ^

    at options.error (w:\Dropbox\WEB\ivan\node_modules\node-sass\lib\index.js:277:32)

Process finished with exit code 1
  • Вопрос задан
  • 1891 просмотр
Подписаться Оценить 2 комментария
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Skillbox
    Веб-вёрстка 3.0
    3 месяца
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 1
vawsan
@vawsan
Frontend Developer
Может я чего не так понял, но логично предположить, что:
1. Мы делаем css
2. А потом его инклудим в Html.

Отсюда уже есть 2 подозрительных момента:
1. style:build должен срабатывать перед html:build, иначе он о файлах не узнает
2. К html:build можно поставить в зависимости style:build, тогда они бы выполнились в нужной последовательности, т.е.:
gulp.task('html:build', ['style:build','js:build','image:min','fonts:build'], function () {
  gulp.src(path.src.html + '**/*.html')
      .pipe(sourcemaps.init())
      .pipe(include)
      .pipe(sourcemaps.write())
      .pipe(gulp.dest(path.demo.html))
      .pipe(reload({stream: true}));
});


Ну и последнее, если я правильно понял цель - то для докидывания файлов в поток самый удобный это gulp-add-src
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@creatoroftheworld
выключи все, потом по-одному включай, до тех пор, пока не начнет тупить. стандартная практика
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 50 000 до 90 000 ₽
FoodSoul Калининград
от 180 000 до 250 000 ₽