环境依赖
- 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") %> */\n', separator: '\n/*---------分割线---------*/\n' }, 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']); };