GruntJS配置实例

GruntJS配置还是比较耗时间的,这里放出一份我在h萌的一个项目的GruntJS的编译配置。这个编译配置参考了网络上的许多地方的配置文件整合的

 
JSON文件如下:

{
  "name": "",
  "version": "0.1.0",
  "dependencies": {
    "grunt": "0.x.x",
    "grunt-autoprefixer": "0.2.x",
    "grunt-contrib-clean": "0.5.x",
    "grunt-contrib-coffee": "0.7.x",
    "grunt-contrib-connect": "0.4.x",
    "grunt-contrib-copy": "0.4.x",
    "grunt-contrib-cssmin": "0.6.x",
    "grunt-contrib-jade": "0.8.x",
    "grunt-contrib-jshint": "0.6.x",
    "grunt-contrib-stylus": "0.8.x",
    "grunt-contrib-uglify": "0.2.x",
    "grunt-contrib-watch": "0.5.x",
	"grunt-html-build":"0.3.x",
	"grunt-contrib-htmlmin":"0.3.x",
	"grunt-cleanempty":"1.0.x"
  },
  "engine": "node >= 0.10"
}

下面是关键的JS

module.exports = function(grunt) {

	// configure the tasks
	grunt.initConfig({

		copy: {
			build: {
				cwd: 'static',
				src: [ '**', '!**/*.styl', '!**/*.coffee', '!**/*.jade' ,'!**.bak','!**.log','!**.html'],
				dest: 'build',
				expand: true
			},
		},
		clean: {
			build: {
				src: [ 'build' ]
			},
			stylesheets: {
				src: [ 'build/**/*.css', '!build/application.css' ]
			},
			scripts: {
				src: [ 'build/**/*.js', '!build/application.js' ]
			},
		},
		stylus: {
			build: {
				options: {
					linenos: true,
					compress: false
				},
				files: [{
					expand: true,
					cwd: 'static',
					src: [ '**/*.styl' ],
					dest: 'build',
					ext: '.css'
				}]
			}
		},
		autoprefixer: {
			build: {
				expand: true,
				cwd: 'build',
				src: [ '**/*.css' ],
				dest: 'build'
			}
		},
		cssmin: {
			build: {
				files: {
					'build/application.css': [ 'build/**/*.css' ]
				}
			}
		},
		coffee: {
			build: {
				expand: true,
				cwd: 'static',
				src: [ '**/*.coffee' ],
				dest: 'build',
				ext: '.js'
			}
		},
		uglify: {
			build: {
				options: {
					mangle: false
				},
				files: {
					'build/application.js': [ 'build/**/*.js' ]
				}
			}
		},
		jade: {
			compile: {
				options: {
					data: {}
				},
				files: [{
					expand: true,
					cwd: 'static',
					src: [ '**/*.jade' ],
					dest: 'build',
					ext: '.html'
				}]
			}
		},
		fixturesPath: "path",
		htmlbuild: {
			dist: {
				src: ['static/*.html'],
				dest: 'build/',
				options: {
					beautify: false,
					prefix: '//some-cdn',
					relative: true,
					scripts: {
					},
					styles: {
					},
					sections: {
					},
					data: {		
					},
				}
			}
		},
		htmlmin: {                                     // Task
			multiple: { 
				options: {                                 // Target options
					removeComments: true,
					collapseWhitespace: true
				},			// Target
				files: [{                                  // Dictionary of files
					expand: true,
					cwd: 'build/',                             // Project root
					src: '**/*.html',                        // Source
					dest: 'build/'                            // Destination
				}]
			}
		},
		cleanempty: {
			options: {
				force: true,
			},
			src: ['build/**/*', 'build/*'],
		},
	});

	// load the tasks
	grunt.loadNpmTasks('grunt-contrib-copy');
	grunt.loadNpmTasks('grunt-contrib-clean');
	grunt.loadNpmTasks('grunt-autoprefixer');
	grunt.loadNpmTasks('grunt-contrib-cssmin');
	grunt.loadNpmTasks('grunt-contrib-coffee');
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-jade');
	grunt.loadNpmTasks('grunt-contrib-stylus');
	grunt.loadNpmTasks('grunt-html-build');
	grunt.loadNpmTasks('grunt-contrib-htmlmin');
	grunt.loadNpmTasks('grunt-cleanempty');

	// define the tasks

	grunt.registerTask(
		'stylesheets', 
		'Compiles the stylesheets.', 
		[ 'stylus', 'autoprefixer', 'cssmin', 'clean:stylesheets' ]
	);

	grunt.registerTask(
		'scripts', 
		'Compiles the JavaScript files.', 
		[ 'coffee', 'uglify', 'clean:scripts' ]
	);

	grunt.registerTask(
		'build', 
		'Compiles all of the assets and copies the files to the build directory.', 
		[ 'clean:build', 'copy', 'stylesheets', 'scripts', 'jade','htmlbuild' ,'htmlmin','cleanempty']
	);

	grunt.registerTask(
		'default', 
		'', 
		[ 'build']
	);

};

使用GruntJS优化你的网站

其实,一开始让我接触GruntJS我也是拒绝的,但是由于想要编译ABPlayerHtml5所以我不得不接触了一下GruntJS,结果发现——根本停不下来。GruntJS简直太好用了。

GruntJS是一个知名(为什么我以前没听说过……)的JavaScript构建工具,它就像“JavaScript世界的编译器”。它能够通过各种编译模块完成CoffeeScript、JadeScript的编译,JavaScript的合并以及压缩,CSS的合并以及压缩以及其他等许许多多的任务。

使用GruntJS进行构建的最大的好处就是能极大地减少你的网站请求次数,对于那些分散的JavaScript以及CSS你完全可以合并成一个文件并且以静态文件的方式放在内容分发网络(CDN)上。当然了,由于JS编译的过程局部变量是经过混淆的,所以文件的体积能进一步的减小。由于GruntJS是基于NodeJS的,所以你很容易就能在服务器上完成脚本的动态编译,如果你的服务器是基于NodeJS的话,你就可以轻松地写出一个能压缩Script以及CSS的静态缓存系统。

更多的可以参见GruntJS中文网:http://www.gruntjs.net/