Tâche de prod en argument ?

[raphaelgoetter]

Sauf contre-avis, je pense transformer la tâche de Prod actuelle en un simple argument dans la CLI.

Avant (deux tâches différentes de build et de prod) : gulp (= gulp build) / gulp prod

Bientôt (une seule et même tâche avec un argument) : gulp (= gulp build) / gulp --prod

Avantages :

• une seule instruction, une seule tâche globale : gulp, à laquelle on passe éventuellement un argument --prod quand on passe en production (c'est à dire pas systématiquement)
• plus facile d'intégrer l'argument dans des tâches conditionnelles (dans une même tâche "CSS" on pourrait faire un if --prod alors je minifie)
• ça facilite plein d'autres petites choses, notamment le nommage (build/prod) du fichier .zip produit

Inconvénient :

• ce n'est plus comme actuellement

[raphaelgoetter]

Voilà ce que ça donnerait, je trouve ça bien plus pratique !

/**
 * Usage général :
 *
 *  - tâche "gulp" : fichiers compilés dans "/dist" (ni minifiés ni concaténés).
 *    Le client peut modifier, améliorer et mettre en prod lui-même.
 *
 *  - tâche "gulp --prod" : fichiers compilés dans "/dist" (minifiés, concaténés,
 *    optimisés, etc.). Le client utilise tel quel.
 */

/* ici les variables, chemins, config, toussa */

/**
 * Tâche de production si ajout de l'argument "--prod"
 */
var isProduction = argv.prod;

/* ------------------------------------------------
 * Tâches de Build : css, html, php, js, img, fonts
 * ------------------------------------------------
 */

// Tâche CSS : Less + autoprefixer + CSScomb + beautify + minify (si prod)
gulp.task('css', function () {
  return gulp.src(paths.src + paths.styles.less.mainFile)
    .pipe($.plumber(onError))
    .pipe($.sourcemaps.init())
    .pipe($.less())
    .pipe($.csscomb())
    .pipe($.cssbeautify(project.configuration.cssbeautify))
    .pipe($.autoprefixer())
    .pipe(gulp.dest(paths.dest + paths.styles.root))
    .pipe($.if(isProduction, $.rename({suffix: '.min'})))
    .pipe($.if(isProduction, $.csso()))
    .pipe($.sourcemaps.write(paths.maps))
    .pipe(gulp.dest(paths.dest + paths.styles.root));
});

// Tâche HTML : includes HTML
gulp.task('html', function () {
  return gulp.src(paths.src + paths.html.allFiles)
    .pipe($.plumber(onError))
    .pipe($.htmlExtend(project.configuration.htmlExtend))
    .pipe(gulp.dest(paths.dest));
});

// Tâche PHP : simple copie des fichiers PHP
gulp.task('php', function () {
  return gulp.src(paths.src + paths.php)
    .pipe(gulp.dest(paths.dest));
});

// Tâche JS : copie des fichiers JS et vendor + concat + uglify (si prod)
gulp.task('js', function () {
  return gulp.src(vendors)
    .pipe($.plumber(onError))
    .pipe(gulp.dest(paths.dest + paths.scripts.root))
    .pipe($.if(isProduction, $.concat(project.globalJSFile)))
    .pipe($.if(isProduction, $.uglify()))
    .pipe(gulp.dest(paths.dest + paths.scripts.root));
});

// Tâche IMG : optimisation des images
gulp.task('img', function () {
  return gulp.src(paths.src + paths.images)
    .pipe($.changed(paths.dest + paths.assets))
    .pipe($.imagemin(project.configuration.imagemin))
    .pipe(gulp.dest(paths.dest + paths.assets));
});

// Tâche FONTS : copie des fichiers typographiques
gulp.task('fonts', function () {
  return gulp.src(paths.src + paths.fonts + '*')
    .pipe($.changed(paths.dest + paths.fonts))
    .pipe(gulp.dest(paths.dest + paths.fonts));
});

// Tâche MISC : copie des fichiers divers
gulp.task('misc', function () {
  var dottedFiles = { dot: true };
  return gulp.src(paths.src + paths.misc, dottedFiles)
    .pipe($.changed(paths.dest))
    .pipe(gulp.dest(paths.dest));
});

/* ------------------------------------------------
 * Tâches autonomes : styleguide, uncss, zip, clean
 * ------------------------------------------------
 */

// Tâche STYLEGUIDE : création automatique d'un guide des styles
gulp.task('styleguide', function () {
  return gulp.src(paths.dest + paths.styles.css.mainFile)
    .pipe($.plumber(onError))
    .pipe($.styledown(project.configuration.styledown))
    .pipe(gulp.dest(paths.dest));
});

// Tâche UNCSS : supprime les styles non utilisés (destination -> destination)
gulp.task('uncss', function () {
  if (project.plugins.uncss) {
    return gulp.src(paths.dest + paths.styles.css.files)
      .pipe($.plumber(onError))
      .pipe(uncss({
        html: [paths.dest + paths.html.allFiles, paths.dest + paths.php],
      }))
      .pipe(gulp.dest(paths.dest + paths.styles.root));
  }
});

// Tâche ZIP : création de fichier .zip du projet
gulp.task('archive', function () {
  argv.prod ? project.zip.name = 'prod' : project.zip.name = 'build';
  var now = new Date(),
      date = now.getFullYear() + '-' + ( now.getMonth() + 1 ) + '-' + now.getDate() + '-' + now.getHours() + 'h' + now.getMinutes(),
      zipName = project.zip.namespace + '-' + project.name + '-' + project.zip.name + '-' + date + '.zip';
  return gulp.src(paths.dest + '/**/')
    .pipe($.zip(zipName))
    .pipe(gulp.dest(paths.root));
});

// Tâche CLEAN : supprime les fichiers CSS et JavaScript inutiles en production
gulp.task('clean', function () {
  return del([
    paths.dest + paths.scripts.files, // on supprime tous les fichiers JS de production
    paths.dest + paths.styles.css.files, // on supprime tous les fichiers CSS de production
    '!' + paths.dest + paths.scripts.root + project.globalJSFile, // sauf les JS concaténés finaux
    '!' + paths.dest + paths.styles.root + 'styles.min.css', // sauf les CSS concaténés finaux
  ]);
});

/* ----------------------------------
 * Tâches principales : récapitulatif
 * ----------------------------------
 */

// Tâche BUILD : tapez "gulp" ou "gulp build"
gulp.task('build', ['css', 'js', 'html', 'img', 'fonts', 'php', 'misc']);

// Tâche PROD : tapez "gulp build --prod"

// Tâche ZIP : (tapez "gulp zip" ou "gulp zip --prod")
gulp.task('zip', gulpSync.sync(['build', 'archive']));

// Tâche WATCH : surveillance Less, HTML et PHP
gulp.task('watch', function () {
  // si demandé, on créé la configuration du plugin browserSync et on l'initialise
  if (project.plugins.browserSync.status === true) {
    var browserSyncConf; // variable contenant la configuration de browserSync
    if (project.plugins.browserSync.proxyMode === true) {
      // initialisation du mode proxy si demandé
      browserSyncConf = {
        proxy: project.url,
      };
    } else {
      // sinon on initialise le mode standalone
      browserSyncConf = {
        server: {
          baseDir: paths.dest,
        }
      };
    }
    // on initialise le plugin browserSync
    browserSync.init(browserSyncConf);
  }

  gulp.watch([paths.src + paths.styles.less.files], ['css', browserSync.reload]);
  gulp.watch([paths.src + paths.html.allFiles, paths.src + paths.php], ['html', 'php', browserSync.reload]);
  gulp.watch([paths.src + paths.scripts.files], ['js', browserSync.reload]);
});

// Tâche par défaut
gulp.task('default', ['build']);

Si pas d'objections très vite, je fais la modif :)

[hiwelo]

Il faut juste checker si gulp-if fonctionne à travers load-plugins mais sinon je trouve ça bien :)

Juste une petite interrogation pour la task archive, pour des questions de lisibilité ça pourrait être bien de développer ce bout de code : argv.prod ? project.zip.name = 'prod' : project.zip.name = 'build'; Non ?

Pour des questions de lisibilité du code, j'ai tendance à éviter ce genre d'écritures en JS et PHP. Mais c'est un avis proprement perso ^^

[raphaelgoetter]

Hello @hiwelo ,

J'ai testé le gulp-if et tout fonctionne très bien.

Pour la syntaxe de argv.prod ça ne me semblait pas très important de devoir détailler. Au contraire, je trouvais ça cool en raccourci. Tu ferais avec un classique if - then - else ? Comment ?

[hiwelo]

Oui un classique if { } mais si tu trouves ça plus clair laisse le comme ça hein ;)

[raphaelgoetter]

Bon, j'ai laissé comme ça pour le moment, mais ne serai pas vexé si ça change un jour :)