自动构建工具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对应的任务。


相关文章
|
1月前
|
JSON 资源调度 前端开发
前端工具 Prettier 详细使用流程(兼容ESLint)
前端工具 Prettier 详细使用流程(兼容ESLint)
101 0
|
1月前
|
JSON 移动开发 资源调度
前端工具 Prettier 详细使用流程(兼容ESLint)
前端工具 Prettier 详细使用流程(兼容ESLint)
129 0
|
1月前
|
jenkins Java 持续交付
配置 Jenkins 构建工具
配置 Jenkins 构建工具
43 2
配置 Jenkins 构建工具
|
1月前
|
JSON JavaScript 数据格式
使用pnpm搭建monorepo开发环境
使用pnpm搭建monorepo开发环境
75 0
|
9月前
|
XML 数据可视化 jenkins
Jenkins自动构建项目
Jenkins自动构建项目
|
IDE NoSQL Java
简单的 C/C++ 项目自动化构建--Xmake
简单的 C/C++ 项目自动化构建--Xmake
|
资源调度 前端开发 开发工具
用 husky 和 lint-staged 构建代码检查工作流
一个项目如果涉及到多人协作,由于每个人代码的书写习惯和风格不太一样,如果没有统一的规范,那就会很乱,这对代码的可维护性大大降低。
186 0
用 husky 和 lint-staged 构建代码检查工作流
|
前端开发 测试技术 API
开发 Babel 插件可以试试这个 CLI 工具
大家好,我是小鑫同学。一位从事过Android开发、混合开发,现在长期从事前端开发的编程爱好者,我觉得在编程之路上最重要的是知识的分享,所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识,欢迎有想法、有同感的伙伴加我fe-xiaoxin微信交流~
213 0
类似GitBook的文档构建工具
类似GitBook的文档构建工具
1485 0
类似GitBook的文档构建工具
|
缓存 JavaScript 前端开发
自动构建工具Gulp
自动构建工具Gulp