Задать вопрос
@Haoss
html-верстальщик

Какая правильная настройка gulp для работы в более менее большом проекте?

Сразу уточню, более менее большой проект имеется ввиду количество шаблонов более 5-10.
Т.к. занимаюсь версткой сайтов перешел на gulp + sass + jade. Пример gulpfile снизу.
В процессе сборки нашел некоторые проблемы:
1 - это периодическая ошибка при компиляции sass - о том что файл не найден, надо несколько раз нажать сохранить, что бы он начал компиляцию. Решение так и не нашел
2 - при большом количестве скомпилированного html периодически browser-sync отказывается перезагружать страницу, надо вручную нажать F5
3 - browser-sync иногда 1 раз, иногда 5-6 раз перегружает watch страницу при компиляции jade. Т.е. ты нажал ctrl+s перешел в браузер и видишь, как он несколько раз подряд перегружает страницу.

Прошу совета по улучшению gulpfile - что правильно ил не правильно сделано, это мой первый проект с этим сборщиком, мне нравится, хочу решить данные проблемы и продолжить работу.

"use strict"

var gulp = require('gulp'),
  browserSync = require('browser-sync'),
  sass = require('gulp-sass'),
  uncss = require('gulp-uncss'),
  autoprefixer = require('gulp-autoprefixer'),
  sourcemaps = require('gulp-sourcemaps'),
  rename = require("gulp-rename"),
  minifyCss  = require('gulp-minify-css'),
  plumber = require('gulp-plumber'),
  jade = require('gulp-jade'),
  spritesmith = require('gulp.spritesmith'),
  browserSync = require('browser-sync');

var plugins = require("gulp-load-plugins")();

// Static server
gulp.task('browser-sync', ['sass', 'html', 'js'], function() {
    browserSync.init({
      server: {
          baseDir: "./"
      },
      notify: false
    });
});

gulp.task('sprite', function () {
  var spriteData = gulp.src('assets/img/icon/*.png').pipe(spritesmith({
    imgName: 'sprite.png',
    cssName: 'sprite.sass',
    algorithm : 'top-down'
  }));
  return spriteData.pipe(gulp.dest('assets/img/icon/sprites/'));
});

// jade
gulp.task('jade', function() {
  gulp.src('assets/jade/*.jade')
    .pipe(plumber())
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('assets/templates'));
})

gulp.task('sass', function() {
  gulp.src('assets/css/main.sass')
    .pipe(plumber())
    .pipe(plugins.sourcemaps.init())
    .pipe(sass())
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    // .pipe(uncss({
    //    html: ['*.html']
    // }))
    .pipe(plugins.sourcemaps.write("./"))
    // .pipe(minifyCss({compatibility: 'ie8'}))
    // .pipe(rename("main.min.css"))
    .pipe(browserSync.reload({stream:true}))
    .pipe(gulp.dest('assets/css/'));
});

gulp.task('html', function(){
  gulp.src('./*.html')
    .pipe(browserSync.reload({stream:true}))
});

gulp.task('js', function(){
  gulp.src('assets/**/*.js')
    .pipe(browserSync.reload({stream:true}))
});

gulp.task('watch', function () {
  gulp.watch('assets/css/**/*.sass', ['sass']);
  gulp.watch('assets/templates/*.html', ['html']);
  gulp.watch('assets/jade/**/*.jade', ['jade']);
  gulp.watch('assets/**/*.js', ['js']);
});

gulp.task('default', ['browser-sync', 'watch']);
  • Вопрос задан
  • 2671 просмотр
Подписаться 4 Оценить 4 комментария
Решения вопроса 1
reskwer
@reskwer
front-end developer
Были, такие же проблемы, решение полностью переписать gulp файл, + установить в саблайм режим атомик севе..
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
sim3x
@sim3x
В процессе сборки нашел некоторые проблемы:

win8.1


лучше использовать линукс
хотя б в виде vagrant
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы