Gulfp + Webpack ou juste Webpack?

par exemple, le cas d'utilisation que vous avez décrit où vous voulez avoir un code différent pour différents environnements.

avec les Scripts Webpack + NPM, c'est facile:

"prebuild:dev": "npm run clean:wwwroot",
"build:dev": "cross-env NODE_ENV=development webpack --config config/webpack.development.js --hot --profile --progress --colors --display-cached",
"postbuild:dev": "npm run copy:index.html && npm run rename:index.html",

"prebuild:production": "npm run clean:wwwroot",
"build:production": "cross-env NODE_ENV=production webpack --config config/webpack.production.js --profile --progress --colors --display-cached --bail",
"postbuild:production": "npm run copy:index.html && npm run rename:index.html",

"clean:wwwroot": "rimraf -- wwwroot/*",
"copy:index.html": "ncp wwwroot/index.html Views/Shared",
"rename:index.html": "cd ../PowerShell && elevate.exe -c renamer --find \"index.html\" --replace \"_Layout.cshtml\" \"../MyProject/Views/Shared/*\"",

maintenant vous maintenez simplement deux config webpack scripts, un pour le mode de développement, webpack.development.js , et un pour le mode de production, webpack.production.js . J'utilise aussi un webpack.common.js qui héberge la config partagée sur tous les environnements, et utilise webpackMerge pour les fusionner.

en raison de la fraîcheur des scripts NPM, il permet un enchaînement facile, similaire à la façon dont gulfp fait Cours d'eau/pipes.

dans l'exemple ci-dessus, pour construire pour le développement, vous allez simplement à votre ligne de commande et exécutez npm run build:dev .

1. NPM serait la première exécution prebuild:dev ,
2. puis build:dev ,
3. et enfin postbuild:dev .

les préfixes pre et post indiquent à NPM quel ordre exécuter.

si vous remarquez, avec les scripts Webpack + NPM, que vous pouvez exécuter un programme natif, tel que rimraf , au lieu d'un goup-wrapper pour un programme natif tel que gulp-rimraf . Vous pouvez également exécuter des fenêtres natives .fichiers exe comme je l'ai fait ici avec elevate.exe ou des fichiers natifs *nix sous Linux ou Mac.

essayez de faire la même chose avec gulfp. Vous devrez attendre que quelqu'un Vienne et écrive un emballage gulfp pour le programme natif que vous voulez utiliser. En outre, vous aurez probablement besoin d'écrire le code alambiqué comme ceci: (pris directement de angular2-seed repo)

Gulfp Code de développement

import * as gulp from 'gulp';
import * as gulpLoadPlugins from 'gulp-load-plugins';
import * as merge from 'merge-stream';
import * as util from 'gulp-util';
import { join/*, sep, relative*/ } from 'path';

import { APP_DEST, APP_SRC, /*PROJECT_ROOT, */TOOLS_DIR, TYPED_COMPILE_INTERVAL } from '../../config';
import { makeTsProject, templateLocals } from '../../utils';

const plugins = <any>gulpLoadPlugins();

let typedBuildCounter = TYPED_COMPILE_INTERVAL; // Always start with the typed build.

/**
 * Executes the build process, transpiling the TypeScript files (except the spec and e2e-spec files) for the development
 * environment.
 */
export = () => {
  let tsProject: any;
  let typings = gulp.src([
    'typings/index.d.ts',
    TOOLS_DIR + '/manual_typings/**/*.d.ts'
  ]);
  let src = [
    join(APP_SRC, '**/*.ts'),
    '!' + join(APP_SRC, '**/*.spec.ts'),
    '!' + join(APP_SRC, '**/*.e2e-spec.ts')
  ];

  let projectFiles = gulp.src(src);
  let result: any;
  let isFullCompile = true;

  // Only do a typed build every X builds, otherwise do a typeless build to speed things up
  if (typedBuildCounter < TYPED_COMPILE_INTERVAL) {
    isFullCompile = false;
    tsProject = makeTsProject({isolatedModules: true});
    projectFiles = projectFiles.pipe(plugins.cached());
    util.log('Performing typeless TypeScript compile.');
  } else {
    tsProject = makeTsProject();
    projectFiles = merge(typings, projectFiles);
  }

  result = projectFiles
    .pipe(plugins.plumber())
    .pipe(plugins.sourcemaps.init())
    .pipe(plugins.typescript(tsProject))
    .on('error', () => {
      typedBuildCounter = TYPED_COMPILE_INTERVAL;
    });

  if (isFullCompile) {
    typedBuildCounter = 0;
  } else {
    typedBuildCounter++;
  }

  return result.js
    .pipe(plugins.sourcemaps.write())
// Use for debugging with Webstorm/IntelliJ
// https://github.com/mgechev/angular2-seed/issues/1220
//    .pipe(plugins.sourcemaps.write('.', {
//      includeContent: false,
//      sourceRoot: (file: any) =>
//        relative(file.path, PROJECT_ROOT + '/' + APP_SRC).replace(sep, '/') + '/' + APP_SRC
//    }))
    .pipe(plugins.template(templateLocals()))
    .pipe(gulp.dest(APP_DEST));
};

code de Production

import * as gulp from 'gulp';
import * as gulpLoadPlugins from 'gulp-load-plugins';
import { join } from 'path';

import { TMP_DIR, TOOLS_DIR } from '../../config';
import { makeTsProject, templateLocals } from '../../utils';

const plugins = <any>gulpLoadPlugins();

const INLINE_OPTIONS = {
  base: TMP_DIR,
  useRelativePaths: true,
  removeLineBreaks: true
};

/**
 * Executes the build process, transpiling the TypeScript files for the production environment.
 */

export = () => {
  let tsProject = makeTsProject();
  let src = [
    'typings/index.d.ts',
    TOOLS_DIR + '/manual_typings/**/*.d.ts',
    join(TMP_DIR, '**/*.ts')
  ];
  let result = gulp.src(src)
    .pipe(plugins.plumber())
    .pipe(plugins.inlineNg2Template(INLINE_OPTIONS))
    .pipe(plugins.typescript(tsProject))
    .once('error', function () {
      this.once('finish', () => process.exit(1));
    });


  return result.js
    .pipe(plugins.template(templateLocals()))
    .pipe(gulp.dest(TMP_DIR));
};

le code gulfp réel est beaucoup plus compliqué que cela, car il ne s'agit que de 2 des plusieurs douzaines de fichiers gulfp dans le repo.

alors, lequel est le plus facile pour vous?

à mon avis, les scripts NPM surpassent de loin gulfp et grunt, tant sur le plan de l'efficacité et de la facilité d'utilisation que sur le plan de l'avant-garde les développeurs devraient envisager de l'utiliser dans leur flux de travail parce que c'est un grand gain de temps.

mise à JOUR

il y a un scénario que j'ai rencontré où je voulais utiliser Gulfp en combinaison avec des scripts NPM et Webpack.

quand j'ai besoin de faire remote debugging sur un iPad ou un appareil Android par exemple, je dois démarrer des serveurs supplémentaires. Dans le passé, j'ai couru tous les serveurs comme des processus séparés, de L'intérieur IntelliJ IDEA (ou Webstorm) qui est facile avec la Configuration D'exécution "composé". Mais si j'ai besoin de les arrêter et de les redémarrer, c'était fastidieux de devoir fermer 5 onglets de serveur différents, plus la sortie était répartie entre les différentes fenêtres.

L'un des avantages de gulfp est que is peut enchaîner toutes les sorties des processus indépendants séparés dans une fenêtre de console, qui devient le parent de tous les serveurs enfants.

donc j'ai créé une tâche gulfp très simple qui exécute mes scripts NPM ou les commandes directement, donc toute la sortie apparaît dans une fenêtre, et je peux facilement terminer tous les 5 serveurs à la fois en fermant la fenêtre de tâche gulfp.

Gulfp.js

/**
 * Gulp / Node utilities
 */
var gulp = require('gulp-help')(require('gulp'));
var utils = require('gulp-util');
var log = utils.log;
var con = utils.colors;

/**
 * Basic workflow plugins
 */
var shell = require('gulp-shell'); // run command line from shell
var browserSync = require('browser-sync');

/**
 * Performance testing plugins
 */
var ngrok = require('ngrok');

// Variables
var serverToProxy1 = "localhost:5000";
var finalPort1 = 8000;


// When the user enters "gulp" on the command line, the default task will automatically be called. This default task below, will run all other tasks automatically.

// Default task
gulp.task('default', function (cb) {
   console.log('Starting dev servers!...');
   gulp.start(
      'devserver:jit',
      'nodemon',
      'browsersync',
      'ios_webkit_debug_proxy'
      'ngrok-url',
      // 'vorlon',
      // 'remotedebug_ios_webkit_adapter'
   );
});

gulp.task('nodemon', shell.task('cd ../backend-nodejs && npm run nodemon'));
gulp.task('devserver:jit', shell.task('npm run devserver:jit'));
gulp.task('ios_webkit_debug_proxy', shell.task('npm run ios-webkit-debug-proxy'));
gulp.task('browsersync', shell.task(`browser-sync start --proxy ${serverToProxy1} --port ${finalPort1} --no-open`));
gulp.task('ngrok-url', function (cb) {
   return ngrok.connect(finalPort1, function (err, url) {
      site = url;
      log(con.cyan('ngrok'), '- serving your site from', con.yellow(site));
      cb();
   });
});
// gulp.task('vorlon', shell.task('vorlon'));
// gulp.task('remotedebug_ios_webkit_adapter', shell.task('remotedebug_ios_webkit_adapter'));

Encore un peu de code pour exécuter 5 tâches, à mon avis, mais il travaille pour le but. Une mise en garde est que gulp-shell ne semble pas exécuter certaines commandes correctement, comme ios-webkit-debug-proxy . Donc j'ai dû créer un Script NPM qui exécute juste la même commande, et puis ça marche.

donc j'utilise principalement des Scripts NPM pour toutes mes tâches, mais de temps en temps quand j'ai besoin d'exécuter un tas de serveurs à la fois, je vais allumer ma tâche Gulfp pour aider. Choisir le bon outil pour le bon travail.

je vous suggère de lire ces articles qui les comparent en profondeur.

• comment utiliser NPM comme un Outil de construction
• pourquoi nous devrions cesser D'utiliser Grunt & Gulp
• pourquoi j'ai quitté Gulfp et Grunt pour les Scripts NPM