grunt自动化脚本 · Web前端爱好者

项目根目录下建立三个文件

1. package.json

   { "name": "grunt demo", "version": "0.1.0", "author": "sky", "devDependencies": { "matchdep": "~0.3.0", //一次执行多次load任务 "grunt": "~0.4.1", "grunt-contrib-clean":"*", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-uglify": "~0.2.1", "grunt-contrib-jshint": "~0.10.0", "grunt-contrib-copy": "*", "grunt-contrib-watch": "~0.4.4", "grunt-contrib-htmlmin" : "*", "grunt-contrib-cssmin":"*", "grunt-contrib-imagemin":"*", "grunt-contrib-connect":"*" } }

2. Gruntfile.js (注释代码看具体项目需要自行修改)

   /** * Created by sky on 2014/11/05 * 自动化脚本 */ module.exports = function (grunt) { 'use strict'; //加载所有grunt任务 require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); //注册任务 grunt.registerTask('build','全自动CSS、JS 压缩 生成文件到build文件夹',['clean','uglify:build', 'cssmin','imagemin','copy']); grunt.registerTask('server','本地创建服务器 及 文件监听',['connect','watch']); //参数配置 var open = grunt.option('open') || false; //配置文件信息 var cfg = grunt.file.readJSON('config.json'), serverConf = cfg.server[cfg.server.selected]; //本地web server信息 var pkg = grunt.file.readJSON('package.json'); //写入文件头的信息 var banner = '/*\n' + ' * Copyright <%= grunt.template.today("yyyy") %>, <%= pkg.author %>\n' + ' *\n' + ' * Released on: <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> '+ '<%= pkg.author %>' +'\n' + '*/\n'; grunt.initConfig({ pkg : pkg, //先清除上一次操作遗留的记录 clean:{ build:['./build/'] }, //JS代码校验 // jshint : { // //更多选项: http://www.jshint.com/docs/options/ // options : { // eqeqeq : true, // devel : true, // asi : true, //忽略分号 // expr : true, //支持赋值语句 // globals : { // jQuery : true, // console : true // } // }, // build : { // files : { // src : [ './js/*'] // } // } // }, //JS合并文件 // concat: { // options: { // //文件内容的分隔符 // separator: '\n', // stripBanners: true, // banner: banner // }, // build: { // src: ['./js/*.js'], // dest: './build/js/script.full.js' // } // }, //HTML压缩 // htmlmin : { // //更多选项：https://github.com/gruntjs/grunt-contrib-htmlmin // options : { // removeComments : true, // collapseWhitespace : true // }, // minify : { // expand : true, // cwd : './html/', // src : ['*.html'], // dest : './build/html/', // ext : '.html' // } // }, //JS压缩 uglify : { //文件头部输出信息 options: { banner: banner, report: "min"//输出压缩率，可选的值有 false(不输出信息)，gzip }, //具体任务配置 build:{ //用该方法表示只压缩js分别输出到对应文件夹,不合并js expand : true, cwd : './js/', src : ['**/*.js'], dest : './build/js/' //用该方法表示先启动上面js合并再压缩 // src: ['<%= concat.build.dest %>'], // dest: './build/js/script.js' } }, //CSS压缩 cssmin : { //文件头部输出信息 options : { banner : banner }, minify : { //用该方法会将所有css合并压缩成一个文件 // files : { // './build/css/style.css' : ['./css/*.css'] // } //用该方法会压缩所有css并且保持每个css独立 expand : true, cwd : './css/', src : ['*.css'], dest : './build/css/', ext : '.css' } }, //图片压缩 imagemin : { build : { files : [{ expand : true, //启动下面选项 cwd : './css/images/', src : ['**/*.{png,jpg,gif}'], dest : './build/css/images/' }] } }, //将images文件夹copy到build目录下 copy : { build : { expand : true, cwd : './images/', src : '**', dest : './build/images/', filter : 'isFile' } }, //本机运行一个web server connect: { server: { options: { port: serverConf.port, hostname: serverConf.host, base: serverConf.src, open: open, livereload:serverConf.livereload } } }, //监听文件变动 //改动哪个文件类型 就执行哪个命令 减少多余命令的执行 watch : { //更多选项： http://github.com/gruntjs/grunt-contrib-watch options : { livereload : true }, // html : { // files : './html/*', // tasks : ['htmlmin'] // }, //JS变动 scripts : { files : './js/*', tasks : ['uglify:build'] }, //CSS变动 css : { files : './css/*', tasks : ['cssmin'] }, //图片变动 img : { files : './css/images/*', tasks : ['imagemin'] }, //内容图变动 images : { files : './images/*', tasks : ['copy'] } } }); }

3. config.json (该文件看是否需要启动服务器来监听，若不需要不需配置)

   { "server":{ "selected": "localhost", "localhost":{ "host": "localhost", "port": "8081", "livereload": "35729", "src": "./" } } }

运行命令

npm install (加载安装相对应的包)

grunt build (执行grunt build全自动化命令，在项目根目录下生成build文件夹)