Autor Zpráva
pk11
Profil
Gulp - jsem totální nováček. Zvládnul jsem všechno nainstalovat (Node, npm, gulp...), dokonce i "obohatit" soubor gulpfile.js o funkci process.exit(), protože mi nechtěl vrátit prompt, a dokážu s tím pracovat. O co se mi jedná: jsem zvyklý jakékoliv, byť i drobné úpravy ve zdrojovém html, css atd.. vždy hned zobrazit v prohlížeči a gulp přeci jenom chvilku trvá, třeba 5 - 10 sekund, je to trošku otravné.

Jsem na 90% přesvědčený, že žádný kodér by na to neměl nervy. Neuměl byste mi někdo poradit "jak se to správně dělá" ... i když teď, když o tom přemýšlím .. hmm ... ok, kdyby náhodou, jde mi o to, jestli se to nějak nedá zrychlit. Děkuju!
Keeehi
Profil
Je potřeba celý proces rozložit do více samostatných částí. Zvlášť js, zvlášť css, zvlášť optimalizace obrázků atd. Každou takovou sekci pak můžeš spouštět samostatně podle toho kde byla změna.
Navíc to nemusíš pouštět ručně ale můžeš využít gulp-watcher který hlídá změny v určených složkách a souborech a následně pak sám spouští definované transformační procesy.
No a aby toho nebylo málo, můžeš ještě využít gulp-livereload který zase hlídá změny ve výsledných souborech a v případě jejich změny upozorní svoji druhou část (rozšíření v prohlížeči) a to provede znovunačtení stránky.
Výsledný systém pak funguje tak, že stačí uložit upravený soubor a změna se automaticky promítne až do prohlížeče.
Kcko
Profil
Keeehi:
watcher ani livereload nereší rychlost procesů.

pk11:
Otázkou je co deláš. Já když si v GULPU pustím např. build SASSu tak je to relativně rychlé, ale není to až zas tak rychlé jako když použiji NODE-SASS (na Libassu).

A samozřejmě minifikace a sloučení souborů např. javascriptu trvá, otázkou je jak velký objem souborů se musí zpracovat a roli hraje i hardware počítače na kterém to pouštíš.

5s je v pohodě ne?

Řekni co konkrétně Ti trvá dlouho a co pouštíš za tasky.
Keeehi
Profil
Kcko:
Řešením může být ale právě to rozdělení do více různých částí, zejména pokud by se ta časově náročná část nemusela provádět pokaždé.
watcher a livereload jsem pak zmínil protože píše o drobných úpravách které chce vidět rychle v prohlížeči a toto by mu mohlo proces zpříjemnit.
Kcko
Profil
Keeehi:
Já tomu rozumím.
Tazateli jde hlavně o to aby to netrvalo oněch 5-10s což mu nemůžeme potvrdit ani vyvrátit, když nevíme co a jak zpracovává.
Klidně může jenom minifikovat a slučovat 10js knihoven a v tom mu žádný watcher ani livereload nepomůže, jsou to nástroje na zcela něco jiného (to víš ty i já), ale on ne, tak ať ho to zbytečně nemate.
pk11
Profil
Mockrát děkuju za reakce. Stručně: edituju v podstatě pouze 2 soubory, index.html a main.scss, ve kterých měním pár řádků kódu. Nejsem moc kodér a tak mi styly dávají vždy trochu zabrat a než se mi podaří dosáhnout kýženého výsledku, kombinace ctrl+s alt+tab f5 (ctrl+f5) nastane nnn... krát.

Tuším, že řešením bude udělat si "pracovní kopii" gulpfile.js, něco jako odlehčenou verzi a pouštět jenom scss a html pluginy. Ale, v tuto chvíli je na mě gulpfile dost složitý, to radši budu čekat ... například pro task 'html' sdružuje 'scss' a 'js' ... představuju si to tak, že mu řeknu "přemel mi jen scss -> css a zkompiluj index.html", ale neumím to a po pravdě mě trochu tlačí termín a nemám nervy na to se to učit. Tak kdyby náhodou .. díky!


Tady je gulpfile.js
// generated on 2018-08-22 using generator-webapp 3.0.1
const gulp = require('gulp');
const gulpLoadPlugins = require('gulp-load-plugins');
const browserSync = require('browser-sync').create();
const del = require('del');
const wiredep = require('wiredep').stream;
const runSequence = require('run-sequence');

const $ = gulpLoadPlugins();
const reload = browserSync.reload;

let dev = true;

gulp.task('styles', () => {
  return gulp.src('app/styles/*.scss')
    .pipe($.plumber())
    .pipe($.if(dev, $.sourcemaps.init()))
    .pipe($.sass.sync({
      outputStyle: 'expanded',
      precision: 10,
      includePaths: ['.']
    }).on('error', $.sass.logError))
    .pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
    .pipe($.if(dev, $.sourcemaps.write()))
    .pipe(gulp.dest('.tmp/styles'))
    .pipe(reload({stream: true}));
});

gulp.task('scripts', () => {
  return gulp.src('app/scripts/**/*.js')
    .pipe($.plumber())
    .pipe($.if(dev, $.sourcemaps.init()))
    .pipe($.babel())
    .pipe($.if(dev, $.sourcemaps.write('.')))
    .pipe(gulp.dest('.tmp/scripts'))
    .pipe(reload({stream: true}));
});

function lint(files) {
  return gulp.src(files)
    .pipe($.eslint({ fix: true }))
    .pipe(reload({stream: true, once: true}))
    .pipe($.eslint.format())
    .pipe($.if(!browserSync.active, $.eslint.failAfterError()));
}

gulp.task('lint', () => {
  return lint('app/scripts/**/*.js')
    .pipe(gulp.dest('app/scripts'));
});
gulp.task('lint:test', () => {
  return lint('test/spec/**/*.js')
    .pipe(gulp.dest('test/spec'));
});

gulp.task('html', ['styles', 'scripts'], () => {
  return gulp.src('app/*.html')
    .pipe($.useref({searchPath: ['.tmp', 'app', '.']}))
    .pipe($.if(/\.js$/, $.uglify({compress: {drop_console: true}})))
    .pipe($.if(/\.css$/, $.cssnano({safe: true, autoprefixer: false})))
    .pipe($.if(/\.html$/, $.htmlmin({
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: {compress: {drop_console: true}},
      processConditionalComments: true,
      removeComments: true,
      removeEmptyAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true
    })))
    .pipe(gulp.dest('dist'));
});

gulp.task('images', () => {
  return gulp.src('app/images/**/*')
    .pipe($.cache($.imagemin()))
    .pipe(gulp.dest('dist/images'));
});

gulp.task('fonts', () => {
  return gulp.src(require('main-bower-files')('**/*.{eot,svg,ttf,woff,woff2}', function (err) {})
    .concat('app/fonts/**/*'))
    .pipe($.if(dev, gulp.dest('.tmp/fonts'), gulp.dest('dist/fonts')));
});

gulp.task('extras', () => {
  return gulp.src([
    'app/*',
    '!app/*.html'
  ], {
    dot: true
  }).pipe(gulp.dest('dist'));
});

gulp.task('clean', del.bind(null, ['.tmp', 'dist']));

gulp.task('serve', () => {
  runSequence(['clean', 'wiredep'], ['styles', 'scripts', 'fonts'], () => {
    browserSync.init({
      notify: false,
      port: 9000,
      server: {
        baseDir: ['.tmp', 'app'],
        routes: {
          '/bower_components': 'bower_components'
        }
      }
    });

    gulp.watch([
      'app/*.html',
      'app/images/**/*',
      '.tmp/fonts/**/*'
    ]).on('change', reload);

    gulp.watch('app/styles/**/*.scss', ['styles']);
    gulp.watch('app/scripts/**/*.js', ['scripts']);
    gulp.watch('app/fonts/**/*', ['fonts']);
    gulp.watch('bower.json', ['wiredep', 'fonts']);
  });
});

gulp.task('serve:dist', ['default'], () => {
  browserSync.init({
    notify: false,
    port: 9000,
    server: {
      baseDir: ['dist']
    }
  });
});

gulp.task('serve:test', ['scripts'], () => {
  browserSync.init({
    notify: false,
    port: 9000,
    ui: false,
    server: {
      baseDir: 'test',
      routes: {
        '/scripts': '.tmp/scripts',
        '/bower_components': 'bower_components'
      }
    }
  });

  gulp.watch('app/scripts/**/*.js', ['scripts']);
  gulp.watch(['test/spec/**/*.js', 'test/index.html']).on('change', reload);
  gulp.watch('test/spec/**/*.js', ['lint:test']);
});

// inject bower components
gulp.task('wiredep', () => {
  gulp.src('app/styles/*.scss')
    .pipe($.filter(file => file.stat && file.stat.size))
    .pipe(wiredep({
      ignorePath: /^(\.\.\/)+/
    }))
    .pipe(gulp.dest('app/styles'));

  gulp.src('app/*.html')
    .pipe(wiredep({
      exclude: ['bootstrap'],
      ignorePath: /^(\.\.\/)*\.\./
    }))
    .pipe(gulp.dest('app'));
});

gulp.task('build', ['lint', 'html', 'images', 'fonts', 'extras'], () => {
  return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true}));
});

gulp.task('default', () => {
  return new Promise(resolve => {
    dev = false;
    runSequence(['clean', 'wiredep'], 'build', resolve);
  });
});
Kcko
Profil
Problém s taskem, resp modulem clean.
process.exit(0) vidím poprvé v životě.

Nutně potřebujes gulp ke kompilaci? Nestačí Ti příkazová řádka a v ní spustit 1 příkaz na přegenerování?
sass --update sass-dir:assets/css
případně do toho zapojíš i ten watcher.

Obecně nemám watcher rád, nechci aby mi přegenerovával styly po každém ctr+s tak mám napsaný jednoduchý build, který mi defakto spouští onu CLI. (To se dá dodělat do každého slušnějšího editoru => Sublime Text, Visual Studio, Atom ...)
pk11
Profil
Keeehi:
Omlouvám se, úplně jsem přehlédl tvůj příspěvek. Ano, to potřebuju. Teď jak to udělám ... sice tuším, ale jak píšu výše, nevím, jestli mám nervy na to ... se s tím nervovat, lol :))


Kcko: já samotný sass nemám, dostal jsem web, který je nakonfigurovaný a jak píšu, rád bych se vyhnul nějakým pro mě v tuto chvíli komplikacím...

Potřebuju něco jako
>gulp --sass + html

jestli mi rozumíš ... díky!
Kcko
Profil
pk11:
ty pouštíš gulp nebo gulp default?
Je to nějaké moc ukecané a složité, pokud potřebuješ přegenerovat sass tak bych si nainstaloval gulp-sass

www.npmjs.com/package/gulp-sass

a pak Ti bude stačit jenom tenhle task

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


Nebo se vyhni gulpu a nainstaluj si Sass globálně přes NPMko (Node)
npm install -g sass (sass-lang.com/install)
a pak Ti půjde i ta příkazová řádka a je to hned.
pk11
Profil
Kcko:
Já mezitím upravil default a pouštím jenom html, tedy takhle:

gulp.task('default', ['html'] );

(samotné ['styles'] nefungovalo...)

I tak to trvá okolo 6-7 vteřin (ono předtím to bylo ještě déle, teprve dneska jsem si to ověřil, že neumím počítat vteřiny, lol..)... zkusím tvůj návrh ...


Kcko, Keehi děkuju vám oběma. Pro změny v css používám sass --watch app/styles:dist/styles a to je přesně, co jsem potřeboval. Pokud budu dělat změny někde jinde na webu (obrázky, html, fonty a .. whatever), tak to proženu tím "velkým Gulpem".

Díky moc, opravdu, něco jsem se zase naučil. Hurá! :)

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0