我想用 Gulp 编译 JavaScript 文件。
我有一个 src
目录,其中所有脚本都以 .js
扩展名存在。我希望所有脚本都单独编译并放入目标目录 (dist
) 中,文件名与原始文件相同。
考虑这个例子:
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解析每个源 JavaScript 文件 header 中指定的依赖项。
我的gulpfile.js看起来像这样:
//==============//
// 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
需要文件名,并且不仅合并原始文件解决了它的依赖关系,但所有 JavaScript 文件都通过 glob 模式指定。
那么,如何获取单个 JavaScript 文件作为输出?如下所示:
dist/jquery.js:
src/jquery.js
vendor/jquery.js
dist/application.js:
src/application.js
vendor/angular.js
vendor/ngprogress-lite.js
...
我现在有这个解决方法:
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;
}
但它看起来很黑客,我找不到让它与 gulp-watch 一起工作的好方法。 .
有没有更好、更简单的方法来解决这个问题并达到预期的结果?
最佳答案
How do I get individual JavaScript files as the output?
检查我对类似问题的回答:Pass random value to gulp pipe template
使用这个 gulp 插件:https://github.com/adam-lynch/glob-to-vinyl
您可以访问单个文件。
这是如何(假设使用此插件):
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);
}
});
});
关于javascript - 使用 Gulp 编译 JavaScript 并解决依赖关系(单独的文件),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24790672/