环境依赖
- Nodejs for grunt
- Ruby for sass
配置文件
package.json
{
"name": "app",
"version": "1.0.0",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-watch": "^0.6.1",
"grunt-contrib-sass": "^0.8.1",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-concat": "^0.5.0",
"grunt-contrib-cssmin": "^0.10.0",
"grunt-contrib-uglify": "^0.6.0",
"grunt-contrib-htmlmin": "^0.3.0",
"grunt-contrib-imagemin": "^0.9.2"
}
}
Gruntfile.js
module.exports = function (grunt) {
// grunt config
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
options: {
style: 'expanded'
},
scss: {
files: [{
src: 'src/css/main.scss',
dest: 'src/css/main.css'
}]
}
},
jshint: {
files: ['gruntfile.js', 'src/js/*.js']
},
concat: {
options: {
banner: '/*! <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> */
',
separator: '
/*---------分割线---------*/
'
},
js: {
files: [{
src: ['src/js/base.js', 'src/js/script.js'],
dest: 'dist/js/<%= pkg.name %>.js'
}]
}
},
cssmin: {
css: {
files: [{
src: 'src/css/main.css',
dest: 'dist/css/<%= pkg.name %>.min.css'
}]
}
},
uglify: {
js: {
files: [{
src: 'dist/js/<%= pkg.name %>.js',
dest: 'dist/js/<%= pkg.name %>.min.js'
}]
}
},
htmlmin: {
options: {
removeComments:true,
collapseWhitespace:true
},
dist: {
files: [{
expand: true, // all html
cwd: 'src/',
src: ['**/*.html'],
dest: 'dist/'
}]
}
},
imagemin: {
img: {
files: [{
expand: true, // all images
cwd: 'src/',
src: ['**/*.{png,jpg,gif}'],
dest: 'dist/'
}]
}
},
watch: {
css: {
files: 'src/css/main.scss',
tasks: ['sass']
},
js: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
}
});
// load task
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');
// regist task
grunt.registerTask('compile', ['watch']);
grunt.registerTask('default', ['sass', 'jshint', 'concat', 'cssmin', 'uglify']);
grunt.registerTask('html', ['htmlmin']);
grunt.registerTask('img', ['imagemin']);
};
参考资源：