Cand Gulpfile pare cam prea mult

Continuând epopeea învățării ReactJS am inceput sa folosesc si mai mult gulp, ecosistemul fiind din ce in ce mai complex: es6, jsx, wtf.

Cand dai de astfel de chestii, mi se pare cam mult. Ce solutii ar mai fi?

// Static files
gulp.task('assets', function () {
    src.assets = 'src/assets/**';
    return gulp.src(src.assets)
        .pipe($.changed(DEST + '/assets/'))
        .pipe(gulp.dest(DEST + '/assets/'))
        .pipe($.size({title: 'assets'}));
});

Aici am gasit un punct de vedere: http://blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/

Varianta prezentată în articol funcționează în cazuri simple, dar cred că în cazuri mai speciale este mai practic grunt/gulp (adică mai multe build-uri cu config asemănător; de exemplu, spargi JS-ul în 2-3-x grupuri)

Nu înțeleg ce anume ți se pare prea mult :smile:

Eu îmi tot ajustez task-urile Grunt astfel încât configurarea propriu-zisă să fie în assets.json. La fiecare proiect tot fac mici ajustări și îmbunătățiri; suntem cinci oameni care folosim acest set-up și nu au fost probleme, altele decât cele de la început, când trebuie să instalezi X sau Y; dar nu consider că e ceva grav, având în vedere numărul de dependințe (node, ruby, sass, python și imagemagick și adăugarea executabilelor în PATH)

Eu nu folosesc es6 sau jsx, au introdus o complexitate inutila, iar modul de compilare nu este eficient pt. front-end decat daca faci apps pt. versiunile de browsers aparute anul acesta.

Sa presupunem ca ai un app de front-end:

client/
  lib/
  index.js
  build.js

Fisierul index al app-ului, index.js

var Awesomeness = require('./lib/something-awesome.js')

Awesomeness(function () {
  // le code
})

Fisierul build.js face bundle la app, monitorizeaza fisierele pt. modificari si foloseste LiveReload:

var fs = require('fs')
var browserify = require('browserify')
var LiveReload = require('tiny-lr')
var watch = require('gaze')

var lr = LiveReload()

var source = __dirname  + '/index.js'
var output = __dirname + '/bundle.js'
var bundle = 'enter-browser-bundle-path-here'

lr.listen(35729, function () {
  console.log('LiveReload is active.')
})

watch(['./**/*.js'], function (error) {
  if (error) return console.error(error)

  this.on('changed', function (filepath) {
    bundle(source, output, function () {
      lr.changed({ body: { files: [bundle] } })
      console.log("File " + output + " has changed, LiveReload " + bundle)
    })
  })
})

function bundle (source, output, callback) {
  browserify()
    .add(source)
    .bundle(function (error, buffer) {
      fs.writeFile(output, buffer, callback)
    })
})

Rulezi build.js cu nodemon

$ nodemon build.js -w build.js

Poate pare ca scrii prea mult cod, dar este mult mai flexibil decat sa folosesti Gulp / Grunt, care sunt doar un wrapper pt. metoda de mai sus. In functie de proiect poti sa adaugi sau sa faci ce modificari ai nevoie, nu trebuie sa scrii un gulp-plugin sau vreun workaround pt. grunt.

Eu nu voiam sa folosesc nici jsx nici es6, insa in react varianta de jsx pare mult mai OK.

Iar es6 a aparut cand am vrut sa folosesc un pachet care avea sintaxa es6

recomand gulp-load-plugins, simplifica putin fisierul
exemple & more info here

Eu am renuntat cand am vazut ca pana am instalat toate jucariile mi-a trecut cheful sa mai lucrez. Nu ma mai intorc niciodata :slight_smile:

2 Likes

Momentan pentru react am renuntat la gulp. Am inceput sa folosesc webpack si mi-a iesit din prima :slight_smile: