前端自动化工具Grunt自动化脚本,直接上例子。

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

  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文件夹)

grunt server (启动服务器并且监听文件改动)