Utilisation de Gulfp pour construire le projet requerjs-gulfp-requirejs

gulp-requirejs a été mis sur liste noire par les gens de gulfp. Ils voient L'optimiseur RequireJS comme leur propre système de construction, incompatible avec gulfp. Je ne sais pas grand chose à ce sujet, mais j'ai trouvé une alternative dans amd-optimize qui a fonctionné pour moi.

npm install amd-optimize --save-dev

puis dans votre gulpfile:

var amdOptimize = require('amd-optimize');
var concat = require('gulp-concat');

gulp.task('bundle', function ()
{
    return gulp.src('**/*.js')
        .pipe(amdOptimize('main'))
        .pipe(concat('main-bundle.js'))
        .pipe(gulp.dest('dist'));
});

la sortie de amdOptimize est un flux qui contient les dépendances du module primaire ( main dans l'exemple ci-dessus) dans un ordre cela résout correctement une fois chargé. Ces fichiers sont ensuite concaténés ensemble via concat en un seul fichier main-bundle.js avant d'être écrits dans le dossier dist .

vous pouvez également miniifier ce fichier et effectuer d'autres transformations au besoin.

dans mon cas, je compilais le texte dactylographié dans des modules AMD pour le bundling. En y réfléchissant davantage, je me suis rendu compte que lorsque je Je n'ai pas besoin de la charge asynchrone fournie par AMD/RequireJS. Je vais essayer de faire compiler les modules CommonJS à la place de TypeScript, puis les regrouper en utilisant webpack ou browserify , qui semblent tous deux avoir un bon support dans gulfp.

mise à JOUR

dans ma réponse précédente, j'ai toujours indiqué que la tâche était prête, même si requerjs avait signalé une erreur. J'ai reconsidéré cette approche et ajouté la journalisation des erreurs. J'essaie aussi de faire échouer la construction complètement comme décrit ici gulp-jshint: Comment faire échouer la construction? parce qu'un échec silencieux ronge vraiment votre temps. Voir le code mis à jour ci-dessous.

le commentaire de Drew à propos de blacklist était très utile et les gens de gulfp suggèrent utiliser requerjs directement. Ainsi je poste ma solution directe requerjs:

var DIST = './dist';
var requirejs = require('requirejs');
var requirejsConfig = require('./requireConfig.js').RJSConfig;

gulp.task('requirejs', function (taskReady) {
    requirejsConfig.name = 'index';
    requirejsConfig.out = DIST + 'app.js';
    requirejsConfig.optimize = 'uglify';
    requirejs.optimize(requirejsConfig, function () {
        taskReady();
    }, function (error) {
        console.error('requirejs task failed', JSON.stringify(error))
        process.exit(1);
    });
});

le fichier à ./dist/app.js est construit et uglifié. Et de cette façon, gulfp saura quand require aura fini de construire. La tâche peut donc être utilisée comme une dépendance.

ma solution fonctionne comme ceci:

./ client/js / main.js:

require.config({
    paths: {
        jquery: "../vendor/jquery/dist/jquery",
        ...
    },
    shim: {
        ...
    }
});

define(["jquery"], function($) {
    console.log($);
});

./ gulpfile.js:

var gulp = require('gulp'),
    ....
    amdOptimize = require("amd-optimize"),
    concat = require('gulp-concat'),
    ...

gulp.task('scripts', function(cb) {

    var js = gulp.src(path.scripts + '.js')
        .pipe(cached('scripts'))
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(remember('scripts'))
        .pipe(amdOptimize("main",
            {
                name: "main",
                configFile: "./client/js/main.js",
                baseUrl: './client/js'
            }
        ))
        .pipe(concat('main.js'));

        .pipe(gulp.dest(path.destScripts));
}
...

cette partie était importante:

configFile: "./client/js/main.js",
baseUrl: './client/js'

cela m'a permis de garder ma configuration au même endroit. Sinon, je devais dupliquer mes chemins et shims dans gulpfile.js.

ça me va. Il me semble que l'on devrait ajouter l'uglification etc via gulfp si désiré. .pipe(uglify()) ...

actuellement je dois dupliquer la config dans main.js pour fonctionner asynchrone.

    ....

    var amdOptimize = require("amd-optimize");

    ...

    var js = gulp.src(path.scripts + '.js')
        .pipe(cached('scripts'))
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(remember('scripts'))
        .pipe(amdOptimize("main",
            {
                name: "main",
                paths: {
                    jquery: "client/vendor/jquery/dist/jquery",
                    jqueryColor: "client/vendor/jquery-color/jquery.color",
                    bootstrap: "client/vendor/bootstrap/dist/js/bootstrap",
                    underscore: "client/vendor/underscore-amd/underscore"
                },
                shim: {
                    jqueryColor : {
                        deps: ["jquery"]
                    },
                    bootstrap: {
                        deps: ["jquery"]
                    },
                    app: {
                        deps: ["bootstrap", "jqueryColor", "jquery"]
                    }
                }
            }

        ))
        .pipe(concat('main.js'));

Désolé pour mon anglais. Cette solution fonctionne pour moi. Cents cinquante et une million neuf cent vingt mille neuf cent vingt"

je pense que vous avez oublié de définir mainConfigFile dans votre gulpfile.js. Donc, ce code sera work

gulp.task('requirejsBuild', function() {
    rjs({
        name: 'main',
        mainConfigFile: 'path_to_config/config.js',
        baseUrl: './app',
        out: 'result.js'
    })
    .pipe(gulp.dest('app/dist'));

});

de plus, je pense que lorsque vous exécutez cette tâche dans gulfp, require ne peut pas trouver son fichier de configuration et

ce n'est pas de la faute de gulp-requirejs.

La raison pour laquelle seule main.JS et config.js est dans la sortie parce que vous n'avez pas besoin/défini d'autres fichiers. Sans cela, l'optimiseur require ne comprendra pas quels fichiers Ajouter, les chemins de votre fichier de configuration ne sont pas une façon de les requérir!

par exemple, vous pouvez charger un main.fichier js à partir de votre fichier de configuration et dans main définir tous vos fichiers (pas optimal mais juste un exemple).

en bas de votre fichier de configuration:

// Load the main app module to start the app
requirejs(["main"]); 

Le principal.js-fichier: (ajouter jquery pour montrer la technique.

define(["jquery"], function($) {}); 

je pourrais aussi recommander gulp-requirejs-optimize à la place, principalement parce qu'il ajoute les fonctions de minimisation / obfuscation gulp-requirejs n'a pas: https://github.com/jlouns/gulp-requirejs-optimize

Comment la mettre en œuvre:

var requirejsOptimize = require('gulp-requirejs-optimize');

gulp.task('requirejsoptimize', function () {
  return gulp.src('src/js/require.config.js')
    .pipe(requirejsOptimize(function(file) {
      return {
        baseUrl: "src/js",
        mainConfigFile: 'src/js/require.config.js',
        paths: {
          requireLib: "vendor/require/require"
        },
        include: "requireLib",
        name: "require.config",
        out: "dist/js/bundle2.js"
      };
  })).pipe(gulp.dest(''));
});

essayez ce code dans votre gulffile:

// Node modules
var
    fs = require('fs'),
    vm = require('vm'),
    merge = require('deeply');    

// Gulp and plugins
var
    gulp = require('gulp'),    
    gulprjs= require('gulp-requirejs-bundler');

// Config
var
    requireJsRuntimeConfig = vm.runInNewContext(fs.readFileSync('app/config.js') + '; require;'),
    requireJsOptimizerConfig = merge(requireJsRuntimeConfig, {
        name: 'main',
        baseUrl: './app',
        out: 'result.js',
        paths: {
            requireLib: 'bower_modules/requirejs/require'
        },
        insertRequire: ['main'],
        // aliases from config.js - libs will be included to result.js
        include: [
            'requireLib',
            "almond",
            "underscore",
            "jquery",
            "backbone",
            "text",
            "book"
        ]
    });

gulp.task('requirejsBuild', ['component-scripts', 'external-scripts'], function (cb) {
    return gulprjs(requireJsOptimizerConfig)            
        .pipe(gulp.dest('app/dist'));
});