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

je suis en train d'utiliser gulp-requirejs pour construire un projet de démonstration. J'attends résultat à un seul fichier avec tous les js dépendances et modèle inclus. Voici mon gulpfile.js

var gulp = require('gulp');
var rjs = require('gulp-requirejs');
var paths = {
  scripts: ['app/**/*.js'],
  images: 'app/img/**/*'
};

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

});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['requirejsBuild']);

le fichier de construction ci-dessus fonctionne sans erreur, mais le résultat.js ne contient que le contenu de main.JS et config.js. Tous les fichiers de vue, jQuery, underscore, backbone ne sont pas inclus.

Comment puis-je configurer gulfp-requirejs pour mettre chaque modèle de js dans un fichier js? Si ce n'est pas la bonne façon de procéder, pouvez-vous suggérer une autre méthode?

Modifier

config.js

require.config({
    paths: {
        "almond": "/bower_components/almond/almond",
        "underscore": "/bower_components/lodash/dist/lodash.underscore",
        "jquery": "/bower_components/jquery/dist/jquery",
        "backbone": "/bower_components/backbone/backbone",
        "text":"/bower_components/requirejs-text/text",
        "book": "./model-book"
    }
});

principal.js

// Break out the application running from the configuration definition to
// assist with testing.
require(["config"], function() {
    // Kick off the application.
    require(["app", "router"], function(app, Router) {
        // Define your master router on the application namespace and trigger all
        // navigation from this instance.
        app.router = new Router();

        // Trigger the initial route and enable HTML5 History API support, set the
        // root folder to '/' by default.  Change in app.js.
        Backbone.history.start({ pushState: false, root: '/' });
    });
});

La sortie est juste une combinaison de ces deux fichiers, ce qui n'est pas ce que j'attendais.

20
demandé sur Aperçu 2014-06-01 13:19:01

7 réponses

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.

30
répondu Drew Noakes 2015-01-28 22:38:23

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.

10
répondu Olga 2017-05-23 12:02:11

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.

5
répondu Henry 2015-05-11 19:24:34

ç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'));
1
répondu Henry 2015-03-03 20:31:38

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

1
répondu FedeF 2015-08-05 14:29:31

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(''));
});
1
répondu Per Thomasson 2016-10-04 07:12:41

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'));
});
0
répondu blazkovicz 2014-09-30 05:57:32