javascript 一个简单网站的 Grunt + require.js 配置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19502355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Grunt + require.js config for a simple website
提问by Kasheftin
I have the following simple structure for my website:
我的网站具有以下简单结构：
src
js
core.js
main.js
lib
jquery-1.8.2.js
require-2.1.1.js
require-text.js
templates
1.html
2.html
index.html
build
I want all js+lib files to be compiled into one build/js/main.js file and other files just to be copied to build folder. How to write grunt.js config for this task? It seems I should use grunt-contrib-require..
我希望所有 js+lib 文件都编译成一个 build/js/main.js 文件，其他文件只是复制到 build 文件夹。如何为此任务编写 grunt.js 配置？看来我应该使用 grunt-contrib-require ..
The second question is how to compile 1.html and 2.html (I use require text! plugin) into one line for each and include theese lines to build/js/main.js? This case there should be only two files into build folder - index.html and main.js.
第二个问题是如何将 1.html 和 2.html（我使用 require text！插件）分别编译为一行，并将这些行包含到 build/js/main.js 中？在这种情况下，构建文件夹中应该只有两个文件 - index.html 和 main.js。
采纳答案by luschn
The Grunt Website offers a very good tutorial to get you started, this is what you will need:
Grunt 网站提供了一个非常好的教程来帮助您入门，这就是您需要的：
- grunt-contrib-concat- To put files together in one
- grunt-contrib-copy- To copy files to your "build" folder
- grunt-usemin- To use the compiled js file in your html
- grunt-contrib-concat- 将文件放在一起
- grunt-contrib-copy- 将文件复制到“build”文件夹
- grunt-usemin- 在你的 html 中使用编译好的 js 文件
I am not sure how to put those html files together though, feels weird to do that but maybe you can find a plugin for it.
我不确定如何将这些 html 文件放在一起，这样做感觉很奇怪，但也许你可以找到一个插件。
回答by Ian Lim
Take a look at grunt-contrib-requirejsand see if it is helpful to you.
看看grunt-contrib-requirejs看看它是否对你有帮助。
回答by softvar
Your Gruntfile.jsshould reside at the root of the directory i.e ls should show src/ build/ Gruntfile.js
你Gruntfile.js应该驻留在目录的根目录即ls should show src/ build/ Gruntfile.js
Contents of `Gruntfile.jsspecific for your requirements:
内容`Gruntfile.js具体为您的要求：
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
js: {
src: [
'src/js/*', 'src/lib/*'
],
dest: 'build/js/combined.js'
}
},
uglify: {
js: {
files: {
'build/js/main.js': ['build/js/combined.js']
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['concat:js', 'uglify:js']);
};
I don't think require-jsto be used here. Require-jsis helpful when you need to load your js scriptsin a specific order. If that being the case add the below code in your Gruntfile.jsjust below pkg: grunt.file.readJSON('package.json'),line
我不认为require-js在这里使用。Require-js当您需要按js scripts特定顺序加载时很有帮助。如果是这种情况，请Gruntfile.js在下面的pkg: grunt.file.readJSON('package.json'),行中添加以下代码
requirejs: {
compile: {
options: {
baseUrl: "path/to/base",
mainConfigFile: "path/to/config.js",
name: "path/to/almond", // assumes a production build using almond
out: "path/to/optimized.js"
}
}
}
回答by Chad Johnson
You might consider adding grunt-requireto the list that luschn put together. It uses r.js, has lots of options, and is pretty darn nice.
您可能会考虑将grunt-require添加到 luschn 放在一起的列表中。它使用 r.js，有很多选择，而且非常好。
