Подтвердить что ты не робот

Использование Gulp для сборки проекта requireJS - gulp -requirejs

Я пытаюсь использовать gulp-requirejs для создания демонстрационного проекта. Я ожидаю, что результатом будет один файл со всеми зависимостями js и включенным шаблоном. Вот мой 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']);

Вышеупомянутый файл сборки работает без ошибок, но result.js содержит только содержимое main.js и config.js. Все файлы вида, jquery, подчеркивание, магистраль не включены.

Как настроить gulp -requirejs, чтобы поместить каждый js-шаблон в один файл js? Если это не правильный путь, можете ли вы предложить другой метод?

Edit

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"
    }
});

main.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: '/' });
    });
});

Результат - это просто комбинация этих двух файлов, чего я не ожидал.

4b9b3361

ОТВЕТЫ

Ответ 1

gulp-requirejs был внесен в черный список gulp людьми. Они считают оптимизатор RequireJS своей собственной системой сборки, несовместимой с gulp. Я мало что знаю об этом, но я нашел альтернативу в amd-optimize, которая сработала для меня.

npm install amd-optimize --save-dev

Затем в вашем 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'));
});

Вывод amdOptimize - это поток, который содержит зависимости первичного модуля (main в приведенном выше примере) в порядке, который правильно разрешается при загрузке. Эти файлы затем объединяются вместе через concat в один файл main-bundle.js перед записью в папку dist.

Вы также можете минимизировать этот файл и выполнять другие преобразования по мере необходимости.

В стороне, в моем случае я компилировал TypeScript в модули AMD для комплектации. Подумав об этом, я понял, что при наборе всего мне не нужна асинхронная загрузка, предоставляемая AMD/RequireJS. Я собираюсь поэкспериментировать с тем, что TypeScript компилирует модули CommonJS, а затем связывает их с помощью webpack или browserify, оба из которых, похоже, имеют хорошую поддержку в gulp.

Ответ 2

UPDATE

Мой предыдущий ответ всегда сообщал taskReady, даже если requirejs сообщили об ошибке. Я пересмотрел этот подход и добавил журнал ошибок. Также я пытаюсь полностью завершить сборку, как описано здесь gulp -jshint: как сбой сборки?, потому что молчащий сбой действительно ест ваше время. См. Обновленный код ниже.

Замечание о черном списке было очень полезным, а gulp люди предлагают напрямую использовать requirejs. Поэтому я отправляю свое прямое решение requirejs:

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);
    });
});

Файл в ./dist/app.js создается и очищается. И таким образом gulp будет знать, когда требуется завершить строительство. Таким образом, задача может быть использована как зависимость.

Ответ 3

Мое решение работает следующим образом:

./клиент/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));
}
...

Эта часть была важна:

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

Это позволило мне сохранить мою конфигурацию в одном месте. В противном случае мне пришлось дублировать мои пути и прокладки в gulpfile.js.

Ответ 4

Это работает для меня. Кажется, что нужно добавить в wuglification и т.д. Через gulp при желании. .pipe(uglify()) ...

В настоящее время я должен дублировать конфигурацию в main.js для асинхронного запуска.

    ....

    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'));

Ответ 5

Извините за мой английский. Это решение работает для меня. (Я использовал gulp -requirejs на моей работе)

Я думаю, вы забыли установить mainConfigFile в свой gulpfile.js. Таким образом, этот код будет работать

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

});

Кроме того, я думаю, что когда вы запускаете эту задачу в gulp, require не может найти свой файл конфигурации и

Ответ 6

Это не ошибка gulp -requirejs.

Причина, по которой в файле выводятся только main.js и config.js, потому что вы не требуете/не определяете какие-либо другие файлы. Без этого требуемый оптимизатор не поймет, какие файлы добавить, пути в вашем конфигурационном файле не могут их требовать!

Например, вы можете загрузить файл main.js из вашего файла конфигурации и в главном определении всех ваших файлов (не оптимальный, а всего лишь пример).

В нижней части вашего конфигурационного файла:

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

Файл main.js: (просто добавив jquery, чтобы показать технику.

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

Я мог бы также рекомендовать gulp -requirejs-optimize, главным образом потому, что он добавляет функции минимизации/обфускации gulp -requirejs не хватает: https://github.com/jlouns/gulp-requirejs-optimize

Как его реализовать:

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(''));
});

Ответ 7

Попробуйте этот код в вашем gulpfile:

// 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'));
});