一.简介

二.grunt安装使用

1.安装nodejs

grunt是一个基于nodejs命令的工具，因此需要安装nodejs环境，nodejs下载地址：

https://nodejs.org/en/ 根据自己的主机的位数或者是根据需要下载相应的平台的安装包，

本文档主要是针对windows环境，nodejs安装和安装其他软件没有什么区别不做详细介绍

关键步骤检查nodejs是否安装成功：在windows命令行窗口中输入npm -version

如果输出nodejs的相应的版本号说明安装成功

2.安装grunt命令行工具grunt-cli

打开windows命令行工具输入：

npm install grunt -g grunt-cli

3.安装grunt

打开windows命令行工具输入：

npm install grunt --save-dev

安装完后检查grunt是否安装成功，在命令行窗口输入：

grunt -version

4.grunt构建web前端

在磁盘上新建一个项目，例如：jsproject

4.1在jsproject下新建一个目录src用于存放js源码文件

4.2创建一个文件package.json

文件package.json和src平行存放

package.json输入以下内容

{

  "name": "yizhi",//构建签署名

  "version": "0.1.0",//构建的版本号

  "devDependencies": {

    "grunt": "~0.4.5",//依赖grunt 版本

    "grunt-contrib-concat": "~0.1.1",//依赖的文件合并插件版本

    "grunt-contrib-jshint": "^0.11.3",//依赖的js语法检测插件版本

    "grunt-contrib-uglify": "~0.8.0"//依赖的js文件压缩插件版本

  }

}

完成package.json配置后输入后：

npm install

（执行该命令时去要cd到项目的根目录）然后观察项目的根目录下多了个一个node_modules目录文件

4.3创建Gruntfile.js

Gruntfile.js文件与src平行放在项目文件的根目录

Gruntfile.js中配置以下内容

module.exports = function (grunt) {
    //config
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        //merger javascipt source files into a specific file
        concat: {
            domop: {
                src: ['src/jquery-calendar-v3.js'],
                dest: 'dest/common.js'
            }
        },
        //grunt uglify plugin is used to compress javascript file
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'dest/common.js',//压缩依赖的原文件
                dest: 'dest/common.min.js'//压缩后的文件
            }
        },
        //grunt jshint plugin is used to check javascript Syntax
        jshint: {
            build: ['Gruntfile.js', 'src/jquery-calendar-v3.js'],//检查js文件中代码的语法错误
            options: {
                jshintrc: '.jshintrc'//从.jshintrc中读取配置
            }
        },
        //grunt watch plugin
        watch: {
            build: ['src/*js', 'src/*.css'],
            task: ['jshint', 'uglify'],
            options: {spawn: false}
        }
    });

    //load plugins
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    //grunt.loadNpmTasks('grunt-contrib-watch');
    //register tasks
    grunt.registerTask('default', ['concat', 'uglify']);//合并和压缩js，需要考虑执行顺序
   //在合并压缩之前先使用jshint检测js代码的语法错误，语法错误是根据.jshintrc文件中的配置来提示
};

.jshintrc文件内容如下：

{

  "boss":false,

  "curly":true,

  "eqeqeq":true,

  "eqnull":true,

  "expr":true,

  "immed":true,

  "newcap":true,

  "noempty":true,

  "undef":true,

  "browser":true,

  "devel":true,

  "node":true

}

最后在windows中输入：grunt命令(执行该命令时去要cd到项目的根目录)，如果没语法错误，grunt就会自动合并源代码并压缩

来源：oschina

链接：https://my.oschina.net/u/1760791/blog/668320

标签

Grunt

grunt前端自动化