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']
	);

};

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注