自动化构建工具--grunt

原创 fenghuixia 随笔 自动化构建工具 179阅读 2017-05-12 15:03:26 举报

来源:http://developer.51cto.com/art/201506/479127.htm

一、前言

自动化地压缩、编译、单元测试、linting等。

二、安装node.js

1.下载node并安装,链接:https://nodejs.org/

  1. 检验是否安装成,控制台输入 ‘node -v’

三、安装grunt-CLI

  1. CLI-->命令行。使用nodejs安装:npm install -g grunt-cli
  2. grunt-cli必须安装到全局环境
  3. 检验,输入grunt,控制台会出现grunt-click:版本号,同时显示unable to find local grunt

四、建立一个简单的测试文档

  1. 三个文件夹,分别为build、src、test;一个Gruntifile.js(开头必须大写);一个package.json;
    2.package.json
    {
    "name": "grunt_test",
    "version": "1.0.0",
    "devDependencies": { //开发依赖项,依赖于某些工具

    }
    }

五、安装grunt

  1. 统一不使用全局安装
    命令行:npm install grunt --save-dev
    --save-dev的意思是在当前目录安装grunt,顺便把grunt保存为这个目录的开发依赖项
  2. 控制台grunt一下,打开package.json会发现加入了grunt依赖项,文件夹会多了个node_modules
  3. 控制台grunt一下,有个warning:default not found.这时候就需要配置Gruntfile.js

六、配置Gruntfile.js

  1. 文件内容如下:
    //包装函数
    module.exports = function(grunt){
    //任务配置,所有插件的配置信息
    grunt.initConfig({
    //获取package.json的信息
    pkg:grunt.file.readJSON('package.json')
    });

    //告诉grunt当我们在终端中输入grunt时需要做些什么(注意先后顺序)
    grunt.registerTask('default',[]);
    }

  2. 控制台grunt一下,运行结果:done

七、grunt插件介绍

grunt团队提供的插件,名字是contrib-为前缀
常用插件如下:
Contrib-jshint——javascript语法错误检查;
Contrib-watch——实时监控文件变化、调用相应的任务重新执行;
Contrib-clean——清空文件、文件夹;
Contrib-uglify——压缩javascript代码
Contrib-copy——复制文件、文件夹
Contrib-concat——合并多个文件的代码到一个文件中
karma——前端自动化测试工具

  1. Contrib-uglify
    1.1. npm install grunt-contrib-uglify --save-dev
    1.2 在Gruntfile.js配置uglify
    //uglify插件的配置信息
    uglify:{
    options:{
    stripBanners:true,
    banner:'/! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> /\n'
    },
    build:{
    src:'src/test.js',
    dest:'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
    }
    }
    options:生成的压缩文件第一行加一句话说明
    build:源文件,生成目标文件
    1.3 配置完后,加载插件
    //告诉grunt我们将使用插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    //告诉grunt当我们在终端中输入grunt时需要做些什么(注意先后顺序)[立即执行]
    grunt.registerTask('default',['uglify']);
    1.4 控制台grunt一下,build文件夹下就生成一个js压缩文件
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复