Autor | Zpráva | ||
---|---|---|---|
pk11 Profil |
#1 · Zasláno: 15. 11. 2018, 04:28:47
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 |
#2 · Zasláno: 15. 11. 2018, 09:14:35
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 |
#3 · Zasláno: 15. 11. 2018, 10:13:47
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 |
#4 · Zasláno: 15. 11. 2018, 11:24:56
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 |
#5 · Zasláno: 15. 11. 2018, 11:50:38
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 |
#7 · Zasláno: 15. 11. 2018, 13:42:29
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 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á! :) |
||
Časová prodleva: 5 let
|
0