問(wèn)題描述

我想用 Gulp 編譯 JavaScript 文件.

I want to compile JavaScript files with Gulp.

我有一個(gè) src 目錄，其中所有腳本都帶有 .js 擴(kuò)展名.我希望將所有腳本單獨(dú)編譯并放置到與原始文件名相同的目標(biāo)目錄(dist)中.

I have a src directory where all scripts are present with .js extension. I want all scripts to be compiled separately and placed into a destination directory (dist) with the same filename as the original.

考慮這個(gè)例子:

src/jquery.js:

/**
 * @require ../../vendor/jquery/dist/jquery.js
 */

src/application.js:

/**
 * @require ../../vendor/angular/angular.js
 * @require ../../vendor/ngprogress-lite/ngprogress-lite.js
 * @require ../../vendor/restangular/dist/restangular.js
 * @require ../../vendor/lodash/dist/lodash.underscore.js
 * @require ../../vendor/angular-input-locker/dist/angular-input-locker.js
 * @require ../../vendor/angular-route/angular-route.js
 */

(function(document, angular) {

    'use strict';

    var moduleName = 'waApp';

    angular.module(moduleName, [
        // Some more code here.
    ;

    // Bootstrapping application when DOM is ready.
    angular.element(document).ready(function() {
        angular.bootstrap(document, [moduleName]);
    });

})(document, angular);

我正在使用 gulp-resolve-dependencies 來(lái)解決在每個(gè)源 JavaScript 文件的標(biāo)頭.

I'm using gulp-resolve-dependencies to resolve dependencies specified in the header of each source JavaScript file.

我的 gulpfile.js 看起來(lái)像這樣:

My gulpfile.js is looking like this:

//==============//
// Dependencies //
//==============//

var gulp = require('gulp');
var pathModule = require('path');
var resolveDependencies = require('gulp-resolve-dependencies');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

//=======//
// TASKS //
//=======//

gulp.task('build:scripts', function(callback) {

    return gulp.src('scripts/*.js')
        .pipe(resolveDependencies({
            pattern: /* @require [s-]*(.*?.js)/g,
            log: true
        }))
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('js/'))
    ;
});

為了合并由 resolveDependencies 解析的腳本，我必須使用 concat，但 concat 需要一個(gè)文件名并且不僅合并原始文件和為它解析了依賴(lài)項(xiàng)，但所有 JavaScript 文件都是通過(guò) glob 模式指定的.

In order to merge scripts resolved by resolveDependencies I have to use concat, but concat requires a filename and merges not only original file and dependencies resolved for it, but all JavaScript files specified via glob pattern.

那么，如何獲取單個(gè) JavaScript 文件作為輸出? 像這樣:

dist/jquery.js:
    src/jquery.js
    vendor/jquery.js

dist/application.js:
    src/application.js
    vendor/angular.js
    vendor/ngprogress-lite.js
    ...

我現(xiàn)在有這個(gè)解決方法:

I have this workaround for now:

gulp.task('build:scripts', function(callback) {

    var compileScript = function(stream, filename) {
        return stream
            .pipe(resolveDependencies({
                pattern: /* @require [s-]*(.*?.js)/g,
                log: true
            }))
            .pipe(concat(filename))
            .pipe(uglify())
            .pipe(gulp.dest('dist/'))
        ;
    };

    var scripts = getListOfFiles('src/', 'js');
    for (key in scripts) {
        var filename = scripts[key];
        var stream = gulp.src(pathModule.join('src/', filename));
        compileScript(stream, filename);
    }

    callback(null);
});

//===================//
// FUNCTIONS & UTILS //
//===================//

/**
 * Returns list of files in the specified directory
 * with the specified extension.
 *
 * @param {string} path
 * @param {string} extension
 * @returns {string[]}
 */
function getListOfFiles(path, extension) {

    var list = [];
    var files = fs.readdirSync(path);
    var pattern = new RegExp('.' + extension + '$');

    for (var key in files) {
        var filename = files[key];
        if (filename.match(pattern)) {
            list.push(filename);
        }
    }

    return list;
}

但它看起來(lái)很老套，我找不到一個(gè)很好的方法讓它與 gulp-觀看.

But it looks hackish and I can't find a good way to make it work with gulp-watch.

有沒(méi)有更好更簡(jiǎn)單的方法來(lái)解決這個(gè)問(wèn)題并達(dá)到預(yù)期的效果?

Is there a better and simpler way to solve this problem and achieve desired result?

推薦答案

如何獲取單個(gè) JavaScript 文件作為輸出?

How do I get individual JavaScript files as the output?

在這里查看我對(duì)類(lèi)似問(wèn)題的回答:將隨機(jī)值傳遞給 gulp 管道模板

Check an answer I gave to a similar problem here: Pass random value to gulp pipe template

使用這個(gè) gulp 插件:https://github.com/adam-lynch/球形到乙烯基

Using this gulp plugin: https://github.com/adam-lynch/glob-to-vinyl

您可以訪問(wèn)單個(gè)文件.

這是怎么做的(假設(shè)使用這個(gè)插件):

This is how (assuming the use of this plugin):

function compileScript(file) {
  gulp
    .src('file')
    .pipe(resolveDependencies({
      pattern: /* @require [s-]*(.*?.js)/g,
      log: true
    }))
    .pipe(concat())
    .pipe(uglify())
    .pipe(gulp.dest('dist/'))
  ;
};

gulp.task('build:scripts', function() {
  globToVinyl('src/**/*.js', function(err, files){
    for (var file in files) {
      compileScript(files[file].path);
    }
  });
});

這篇關(guān)于使用 Gulp 編譯 JavaScript 并解決依賴(lài)關(guān)系(單獨(dú)的文件)的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！