Grunt& requirejs优化器用于多应用程序项目 [英] Grunt & requirejs optimizer for a multi app project
问题描述
static / js $我有一些问题让Grunt对以下结构的项目执行requirejs优化: b $ b |──apps
|──app.js
|──dash.js
|──news.js
...(更多'app'文件)
|──构建
|──集合
|──libs
|──模型
|──util
|──views
每个 static / js / apps / *。js
应该被编译为包含相关依赖关系的 static / js / build / *。js
(例如 views / view1
, libs / query
等)。
目前正在由一个基本的bash脚本执行 p>
JS_ROOT =static / js
for $ {JS_ROOT} / apps / *
FILE = $(basename -s .js $ {f})
pushd。
cd $ {JS_ROOT}&& r.js -o baseUrl =。 name = libs / require-min.js include = apps / $ {FILE} out = build / $ {FILE} .js
popd
done
我试图转移到基于Grunt的优化,在 Grunt.js
中包含以下内容:
requirejs:{
compile:{
options:{
appDir:'static / js /',
baseUrl:'./apps/',
dir:'static / js / build /',
modules:[
{
name: 'app',
}
]
}
}
}
运行会产生以下错误:
>>追踪依存关系:app
>>错误:ENOENT,没有这样的文件或目录
>> 'static / js / build / apps / libs / jquery.js'
>>在模块树中:
>> app
我可以清楚地看到问题所在,但未能弄清楚如何表明每个 static / js / apps / *。js
文件中的依赖关系都位于 static / js /
not <$ c $除此之外,我假定模块$ c> c $ c> block包含
名称:'app'
应该输出已编译的文件 static / js / build / app.js
从 static / js / apps / app.js
。
的内容中添加<$对于 static / js / apps
中的每个文件,c $ c> module 块,我怎样才能将每个文件编译成相关的 static / js / build / *。js
file?
更新1
因此,我的Gruntfile中的以下代码将 static / js / apps / app.js
成功编译为 static / js /build/app.js
:
requirejs:{
compile:{
选项:{
baseUrl:'static / js /',
include:'./apps/app.js',
out:'static / js / build / app.js',
}
}
}
下一步是编译 static / js / apps / *。js
转换为 static / js / build / *。js
...
更新2
修改上述内容到 p>
requirejs:{
compile:{
options:{
aseUrl:'../' ,
包括:'./apps/<%= appFile%>',
out:'static / js / build /<%= appFile%>',
}
}
}
并创建任务:
grunt.registerTask('buildrjs',function(){
var dir ='static / js / apps /';
grunt.file.setBase(dir);
var files = grunt.file.expand(['*。js']);
files.forEach(function(filename){
grunt.log.write('Compiling'+ filename +'\\\
');
grunt.config.set('appFile',filename );
grunt.task.run('requirejs:compile');
});
});
几乎让我接触到解决方案。这些任务遍历 static / js / apps /
中的每个文件,并将文件传递到 grunt.config.set('appFile',filename);
。任务输出结果编译app.js编译news.js ...
等,然而实际上 requirejs:compile
任务在&在 static / js / apps /
目录中的最后一个文件上,而不是每个单独的文件。一个异步的问题?
通过将多组选项传递给requirejs任务解决了这个问题,感谢这篇文章为我需要的最终指针:
module.exports = function(grunt){
var files = grunt.file.expand('static / js / apps / *。js');
var requirejsOptions = {};
files.forEach(function(file){
var filename = file.split('/')。pop();
requirejsOptions [filename] = {
选项:{
baseUrl:'static / js /',
include:'./apps/'+filename,
out:'static / js / build /'+文件名
}
};
});
grunt.initConfig({
pkg:grunt.file.readJSON('package.json'),
requirejs:requirejsOptions,
});
};
然后 I'm having issues getting Grunt to perform requirejs optimization on a project with the following structure: Each of This is currently being performed by a basic bash script: I'm attempting to move to a Grunt-based optimization, with the following in Running generates the following error: I can clearly see what the problem is, but am failing to figure out how to indicate that the dependencies in each In addition to this, I'm assuming that the Without creating an additional Update 1 So the following in my Gruntfile compiles The next step being to compile Update 2 Modifying the above to: And creating the task: Almost gets me to the solution. The tasks runs through each file in Solved, by passing multiple sets of options to the requirejs task, thanks to this article for the final pointers I needed: Then the 这篇关于Grunt& requirejs优化器用于多应用程序项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! ['requirejs']
任务可以像平常一样运行,并将根据选项中的每一个输出适当的编译后的.js文件:{>
requirejsOptions
code>,例如:
grunt.registerTask('default',['requirejs']);
static/js
|── apps
|── app.js
|── dash.js
|── news.js
... (many more 'app' files)
|── build
|── collections
|── libs
|── models
|── util
|── views
static/js/apps/*.js
should be compiled to static/js/build/*.js
containing the relevant dependencies (eg. views/view1
, libs/query
etc).JS_ROOT="static/js"
for f in ${JS_ROOT}/apps/*
do
FILE=$(basename -s .js ${f})
pushd .
cd ${JS_ROOT} && r.js -o baseUrl=. name=libs/require-min.js include=apps/${FILE} out=build/${FILE}.js
popd
done
Grunt.js
:requirejs: {
compile: {
options: {
appDir: 'static/js/',
baseUrl: './apps/',
dir: 'static/js/build/',
modules: [
{
name: 'app',
}
]
}
}
}
>> Tracing dependencies for: app
>> Error: ENOENT, no such file or directory
>> 'static/js/build/apps/libs/jquery.js'
>> In module tree:
>> app
static/js/apps/*.js
file are in static/js/
not static/js/build
modules
block containing name: 'app'
should be outputting the compiled file static/js/build/app.js
from the contents of static/js/apps/app.js
.module
block for each file in static/js/apps
, how can I compile each of the files into their relevant static/js/build/*.js
file?static/js/apps/app.js
successfully into static/js/build/app.js
:requirejs: {
compile: {
options: {
baseUrl: 'static/js/',
include: './apps/app.js',
out: 'static/js/build/app.js',
}
}
}
static/js/apps/*.js
into static/js/build/*.js
without having to define each individually...requirejs: {
compile: {
options: {
baseUrl: '../',
include: './apps/<%= appFile %>',
out: 'static/js/build/<%= appFile %>',
}
}
}
grunt.registerTask('buildrjs', function() {
var dir='static/js/apps/';
grunt.file.setBase(dir);
var files = grunt.file.expand(['*.js']);
files.forEach(function(filename) {
grunt.log.write('Compiling '+filename+'\n');
grunt.config.set('appFile', filename);
grunt.task.run('requirejs:compile');
});
});
static/js/apps/
and passes the filename into grunt.config.set('appFile', filename);
. The output of the task outputs Compiling app.js Compiling news.js...
etc, however afterwards the actual requirejs:compile
tasks runs over & over on the last file in the static/js/apps/
directory, rather than each individual file. An async issue?module.exports = function(grunt) {
var files = grunt.file.expand('static/js/apps/*.js');
var requirejsOptions = {};
files.forEach(function(file) {
var filename = file.split('/').pop();
requirejsOptions[filename] = {
options: {
baseUrl: 'static/js/',
include: './apps/'+filename,
out: 'static/js/build/'+filename
}
};
});
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
requirejs: requirejsOptions,
});
};
['requirejs']
task can be run as normal and will output the appropriate compiled .js file as per each of the options: {}
blocks that were specified in requirejsOptions
, eg:grunt.registerTask('default', ['requirejs']);