[英]Build whole angular project using grunt
I'm using grunt for the first time in order to annotate/minify/uglify my whole angular project. 我第一次使用grunt来注释/最小化/丑化我的整个角度项目。 Here is what i have for the moment :
这是我目前所拥有的:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
ngAnnotate: {
options: {
singleQuotes: true
},
all: { //"app" target
files: [
{
expand: true,
src: ['./app/**/*.js'],
dest: './build',
},
],
}
},
concat: {
js: { //target
files: [
{
expand: true,
src: ['./build/**/*.js'],
dest: '.',
},
],
}
},
uglify: {
js: { //target
files: [
{
expand: true,
src: ['./build/**/*.js'],
dest: '.',
},
],
}
}
//grunt task configuration will go here
});
//load grunt task
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-ng-annotate');
//register grunt default task
grunt.registerTask('default', ['ngAnnotate', 'concat', 'uglify']);
}
This works great, i get all my .js files in a "build" folder, with the correct folder architecture. 这很好用,我将所有.js文件保存在具有正确文件夹架构的“构建”文件夹中。 The problem is : i only have the javascript files.
问题是:我只有javascript文件。
What am i supposed to add in the gruntfile to have my whole project architecture in the "build" folder ? 我应该在gruntfile中添加些什么,以便将整个项目体系结构放在“ build”文件夹中? ( HTML,CSS and media files in the right places, not only the annotated/minified/uglified javascript ?
(HTML,CSS和媒体文件放在正确的位置,不仅是带注释/缩小/丑化的javascript吗?
Let's assume we want the following post-build file structure: 假设我们需要以下构建后文件结构:
.
├── build
│ ├── css
│ ├── img
│ └── js
└── index.html
grunt-contrib-concat grunt-contrib-concat
You can just add a parameter for your CSS to be concatenated in a single file, just like you did with JS files. 您只需为要添加CSS的参数添加一个文件即可,就像处理JS文件一样。
concat: {
js: {
src: [
'scripts/config.js',
'app.js',
'controllers/*.js'
],
dest: 'build/js/main.js'
},
css: {
src: [
'css/*.css'
],
dest: 'build/css/main.css'
}
}
grunt-contrib-cssmin grunt-contrib-cssmin
This will minify your CSS (the single file the concat task created.) 这将最小化CSS(concat任务创建的单个文件。)
cssmin: {
target: {
files: [{
expand: true,
cwd: 'build/css',
src: ['*.css', '!*.min.css'],
dest: 'build/css',
ext: '.min.css'
}]
}
}
grunt-contrib-imagemin grunt-contrib-imagemin
Minifies your images and puts them in build/img
. 缩小您的图像并将其放入
build/img
。
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'images/',
src: ['**/*.{png,jpg,jpeg}'],
dest: 'build/img/'
}]
}
}
And finally: 最后:
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['concat', 'uglify', 'cssmin', 'imagemin']);
You'll want to look at the copy
task . 您将需要查看
copy
任务 。 It lets you copy files from one directory to another (like your html, css, fonts, images, etc): 它使您可以将文件从一个目录复制到另一个目录(例如html,css,字体,图像等):
copy: {
html: {
files: [
{expand: true, cwd: '.app/', src: ['some-dir/index.html'], dest: '.build/'}
]
},
css: {
files: [
{expand: true, cwd: '.app/', src: ['some-dir/styles/**/*.css'], dest: '.build/'}
]
},
// ... more targets for `copy`
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.