30天了解30种技术系列---(3)JS的Make-GruntJS

阅读更多

什么是GruntJS

---

Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务

例如：压缩（minification）、编译、单元测试、linting。

 

GruntJS依赖

---

Node.js

 

GruntJS 组件安装

 

1. GruntJS CLI ---主要作用为命令行工具

       安装：npm install grunt-cli -g

 

GruntJS 演示

 

---

1. 创建目录hellogrunt

  
 

  2. 执行npm init

  3. 填入相关信息并输入yes

 4. 生成package.json

 
5. 将Grunt加入该项目

npm install grunt --save-dev

 

效果:

同理还可以安装其他模块

npm install grunt-contrib-jshint --save-dev

 

Gruntfile.js

---

 一般做2件事情：

1. 读取package信息

2. 插件加载、注册任务，运行任务（grunt对外的接口全部写在这里面）

  

 常见结构为：

 

  module.exports = function(grunt){

   grunt.initConfig({

 

   })  

  };

 

 具体做法：

      1. 安装 npm install grunt-contrib-uglify --save-dev

      2. 创建hellogrunt.js，内容如下

   
      3. 创建Gruntfile.js，内容如下

   4.执行grunt ,神奇的一幕发生,系统会自动加载package.json，同时将hellogrunt.js 生成为hellogrunt.min.js

 

自动打包神奇的完成！

 

 

如果大家对该技术感兴趣，可以关注我们的微信号！进行咨询。

 

转载请说明来自图灵搜索