自动构建工具Grunt

简介: 摘要:   大部分项目在部署之前都需要做的就是js、css文件的压缩、合并,以及一些文件的错误检查,甚至是将LESS文件转换成css文件,coffeescript文件转化成js文件等等。但是项目开发是分迭代的,没开发完一次,上面的工作要重新做一遍。

摘要:

  大部分项目在部署之前都需要做的就是js、css文件的压缩、合并,以及一些文件的错误检查,甚至是将LESS文件转换成css文件,coffeescript文件转化成js文件等等。但是项目开发是分迭代的,没开发完一次,上面的工作要重新做一遍。那有什么工具能帮助我们来做这些重复的工作呢?Grunt就是其中一个非常好用的工具。下面就来学习一下Grunt。

安装:

  Grunt是基于node.js,所以你先安装node.js,安装完之后,只需要执行下面的命令就可以安装Grunt

npm install -g grunt-cli

参数g表示全局安装,grunt-cli表示安装的是grunt的命令行界面。

  安装完成之后,他会把Grunt配置到你的系统路径,允许其从任何目录下运行。安装完之后并不能执行操作,因为Grunt是基于模块机构,所以必须安装模块。模块是局部的,是根据项目需求来安装的。在项目的随便一个目录下(最好是根目录,也可以随便创建个目录)新建一个文件---package.json(也可以通过node init来创建),内容如下:

{
    "name": "",            // 项目名称
    "version": "",         // 项目版本
    "private": true,       // 项目是否私有
    "description": "",     //  项目描述
    "main": "",            // 项目主要文件
    "dependencies": {},    // 项目依赖的模块
    "devDependencies": {   // 项目开发阶段依赖的模块
        "grunt": "0.x.x",  // grunt模块为最新的0.x.x版
        "grunt-contrib-clean": "~0.5.0", // clean插件不低于0.5.0
        "grunt-contrib-copy": "~0.5.0",
        "grunt-contrib-less": "~0.11.0",
        "grunt-contrib-uglify": "~0.4.0",
        "grunt-contrib-watch": "~0.6.1",
        "grunt-contrib-concat": "*"
    },
    "keywords": [],   // 项目关键字
    "author": {       // 作者
        "name": "",
        "age": ""
    },
    "contributors": [],  // 贡献者 
    "license": ""        // 版权
}

 

 

然后在当前目录下,通过命令终端运行npm install,这时你会发现多出一个node_modules文件夹,里面就是我们安装的模块。

配置:

  Grunt和模块都已经安装完成了,下面需要做的就是创建一个配置文件,来告诉Grunt需要去哪里,然后做什么等等。在上面的目录下新建一个文件Gruntfile.js(注意大小写),内容如下:

module.exports = function(grunt) {
  
  'use strict';

  // 配置Grunt各种模块的参数
  grunt.initConfig({
    clean:  {
      oldMinFiles: [],
      afterUglify: []
    },
    jslint: {
      command: "",
      options: ""
    },
    concat: {

    },
    uglify: {

    },
    watch:  {

    },
    copy: {

    },
    less: {

    }
  });

  // 从node_modules目录加载模块文件
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-cmd-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // 定义任务
  grunt.registerTask('default', ['jsLint', 'concat', 'uglify']);
  grunt.registerTask('check', ['jslint']);

};

 

 

只需要在当前目录执行命令

合并文件:

grunt concat

代码检查:

grunt check 

 

 后期将介绍grunt的每一个模块。

附录:

 

grunt.initConfig

配置各模块的参数,每项对应一个同名模块。

grunt.loadNpmTasks

加载所需的模块。

grunt.registerTask

定义具体的任务。第一个参数为任务名,第二个参数是一个数组,表示该任务需要依次使用的模块。default是默认任务,即直接输入grunt命令,后面不跟任何参数,这时所调用的模块为default对应的任务。

 

 

  

 

相关文章
|
3天前
|
云安全 人工智能 安全
AI被攻击怎么办?
阿里云提供 AI 全栈安全能力,其中对网络攻击的主动识别、智能阻断与快速响应构成其核心防线,依托原生安全防护为客户筑牢免疫屏障。
|
13天前
|
域名解析 人工智能
【实操攻略】手把手教学,免费领取.CN域名
即日起至2025年12月31日,购买万小智AI建站或云·企业官网,每单可免费领1个.CN域名首年!跟我了解领取攻略吧~
|
7天前
|
安全 Java Android开发
深度解析 Android 崩溃捕获原理及从崩溃到归因的闭环实践
崩溃堆栈全是 a.b.c?Native 错误查不到行号?本文详解 Android 崩溃采集全链路原理,教你如何把“天书”变“说明书”。RUM SDK 已支持一键接入。
539 206
|
3天前
|
编解码 Linux 数据安全/隐私保护
教程分享免费视频压缩软件,免费视频压缩,视频压缩免费,附压缩方法及学习教程
教程分享免费视频压缩软件,免费视频压缩,视频压缩免费,附压缩方法及学习教程
215 138
|
存储 人工智能 监控
从代码生成到自主决策:打造一个Coding驱动的“自我编程”Agent
本文介绍了一种基于LLM的“自我编程”Agent系统,通过代码驱动实现复杂逻辑。该Agent以Python为执行引擎,结合Py4j实现Java与Python交互,支持多工具调用、记忆分层与上下文工程,具备感知、认知、表达、自我评估等能力模块,目标是打造可进化的“1.5线”智能助手。
726 52
|
5天前
|
人工智能 移动开发 自然语言处理
2025最新HTML静态网页制作工具推荐:10款免费在线生成器小白也能5分钟上手
晓猛团队精选2025年10款真正免费、无需编程的在线HTML建站工具,涵盖AI生成、拖拽编辑、设计稿转代码等多种类型,均支持浏览器直接使用、快速出图与文件导出,特别适合零基础用户快速搭建个人网站、落地页或企业官网。
893 157
|
4天前
|
存储 Linux iOS开发
最新学习教程,电脑剪贴板不够用!这几个方法教你更多复制粘贴超高效方法,并附上几个扩展工具供你学习
最新学习教程,电脑剪贴板不够用!这几个方法教你更多复制粘贴超高效方法,并附上几个扩展工具供你学习
213 136
下一篇
oss云网关配置