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
  • Вопрос задан
  • 1886 просмотров
Решения вопроса 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
выключи все, потом по-одному включай, до тех пор, пока не начнет тупить. стандартная практика
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы