Ответы пользователя по тегу Gulp.js
  • Как разделить поток на несколько файлов в Gulp.js?

    voidnugget
    @voidnugget
    Программист-прагматик
    var merge = require('merge-stream');
    gulp.task('sass-global', function () {
      var merged = merge();
      global_css.forEach((entry) => {
        merged.add(gulp.src(entry)
          .pipe(plugins.plumber({errorHandler: plugins.notify.onError("<%= error.message %>")}))
          .pipe(plugins.sourcemaps.init())
          .pipe(plugins.sass())
          .pipe(plugins.autoprefixer({
            browsers: prefix_list,
            cascade: false
          }))
          .pipe(plugins.csscomb('./dev/libs/comb/research.json'))
          .pipe(plugins.sourcemaps.write('./'))
          .pipe(gulp.dest('./public/css')));
      });
    
      return merged;
    });


    Типа так
    Ответ написан
    9 комментариев
  • Gulp plugin css code style?

    voidnugget
    @voidnugget
    Программист-прагматик
    У Gulp'a есть родной фрактальний плагин к js-beautify.

    А он умеет html / js / css бьютифицировать.

    Я частенько пользуюсь atom-beautify на право и на лево.
    Ответ написан
    Комментировать
  • Gulp.run() является устаревшим. Как исправить ошибку?

    voidnugget
    @voidnugget
    Программист-прагматик
    gulp.task('default', ['server'], function() {
      gulp.watch('src/jade/**', ['jade']);
      gulp.watch('src/css/**', ['postcss']);
      gulp.watch('src/images/**/*.@(png|jpg)', ['images']);
    });

    Для livereload'а лучше использовать browsersync.
    Важно не забывать возвращать потоки и вызывать callback'и что бы нормально происходила синхронизация.

    Нужно делать так
    gulp.task('js',function(){
        return gulp.src('./assets/js/*.js')
            .pipe(doSomeStuff());
    });

    и вот так
    var merge = require('merge-stream');
    
    gulp.task('js',function(){
        merged = merge();
        [
          'mdpi', 'hdpi', 'xhdpi'
        ].forEach(function(density) {
        merged.add(gulp.src('app/images/**/*.@(png|gif|jpeg)')
            .pipe(doSomeMagicStuff()))
            .pipe(gulp.dest('dist/images/' + density)));
        });
    
        return merged;
    });

    если нужно обрабатывать несколько файлов одновременно.

    Ну и можно использовать callback'и
    var plato = require('plato');
    
    gulp.task('plato', function(done) {
        plato.inspect('app/**/*.js', 'reports', {}, function(reports) {
            done();
        });
    });
    Ответ написан
    Комментировать
  • Как подключить отдельные файлы используя wiredep?

    voidnugget
    @voidnugget
    Программист-прагматик
    Если читатать доки - становится понятно что есть опция exclude,
    которая принимает строки и регулярки.
    var wiredep = require('wiredep').stream;
    
    gulp.task('wiredepWIthoutJquery', function() {
      return gulp.src('index.html')
        .pipe(wiredep({
          exclude: [ /jquery/],
        }))
        .pipe(gulp.dest('./dest'));
    });
    Ответ написан
    Комментировать
  • Как превратить js объект в поток Gulp для дальнейшей записи в json файл?

    voidnugget
    @voidnugget
    Программист-прагматик
    Потоки gulp'a это не потоки node.js - в них передаётся путь файла и опционально его содержимое.
    Проще всего не заморачиваться и делать через fs
    var gulp = require('gulp'),
      g = require('gulp-load-plugins')(),
      fs = require('fs');
    
    gulp.task('writeStuff', function(done) {
      var stuff = {};
    
      fs.writeFile('file.json', stuff, function(err) {
        if (err) throw err;
        g.util.log('It\'s saved!');
        done();
      });
    });


    Вот пример как создать файл и запихнуть его в поток:
    var gutil = require('gulp-util'),
      through = require('through2');
    
    function makeFileStream(name, source, options) {
      var file = new gutil.File({
        cwd: optaions.cwd | "",
        base: options.base | "",
        path: name,
        contents: ((source instanceof Buffer) ? source : new Buffer(source))
      });
    
      var stream = through.obj(function(file, enc, done) {
        this.push(file);
        return done();
      });
    
      stream.write(file);
    
      if (options && options.src) {
        stream.end();
      }
    
      return stream;
    };
    Ответ написан
    Комментировать
  • Почему Gulp медленно работает?

    voidnugget
    @voidnugget
    Программист-прагматик
    Ну во первых - нужно возвращать promise с функции что бы корректно отображалось время выполнения и задачи могли быть нормально синхронизированы.
    gulp.task('stuff', function() {
      return gulp.src([]).pipe(gulp.dest('whatever'));
    });

    Во вторых gulp.run() устарел, корректнее запускать задачи через watch:
    gulp.task('watch', function() {
      gulp.watch('*.stuff', ['aJob']);
    });

    А в третих - это не Gulp медленный, а компас каждый раз с нуля рестартует.
    Лучше отдельно оформить задачу с compass watch'ем - там в конфиге gulp-compass'a есть отдельно опция task.

    А я слез на stylus - там нет таких проблем.
    Сейчас подумываю об uncss.

    Обязательно нужно почитать про синхронизацию в gulp'e - мало кто понимает как её правильно выполнять.

    Для референса можно взять мой старый gulp-seed, правда я его давно не обновлял.
    Ответ написан
    Комментировать
  • Где ошибка в работе gulp task: watch?

    voidnugget
    @voidnugget
    Программист-прагматик
    Так уже очень давно не работает...
    Надо так
    gulp.task('doStuff', function(done) {done();});
    gulp.task('watch', function(){
        gulp.watch(['dist/**'], 'doStuff')
                .on('change', function(file) {
                    fileChanged(file.path);
                });
    });
    Ответ написан
  • Помогает ли gulp при верстке обычных сайтов?

    voidnugget
    @voidnugget
    Программист-прагматик
    Да.
    Обычно заводится отдельный gulp таск, который получает реквизиты для заливки с переменных окружения, и с его помощью уже происходит заливка после сборки. Особенно удобно для aws и heroku, но и sftp покатит.
    Кроме всего прочего можно подключить автопрефиксер с uncss и csslint для подсказок о возможных недочётах.
    ИМХО проще всего и быстрее всего сейчас с stylus'ом, ибо node-sass и медленее и не особо стабильный, а гонять отдельно compass вообще сверхслоупочно, хотя некоторые местные предпочитают чистый uncss.
    Ответ написан
    1 комментарий