Grunt入门学习

grunt学习一

前话(摘自https://www.gruntjs.net/)

  • 1.在学习之前了解下为什么需要用构建工具
    一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作
  • 2.为什么要使用 Grunt,Grunt的作用是什么?
    Grunt 生态系统非常庞大,并且一直在增长。由于拥有数量庞大的插件可供选择,因此,你可以利用 Grunt 自动完成任何事,并且花费最少的代价。如果找不到你所需要的插件,那就自己动手创造一个 Grunt 插件,然后将其发布到 npm 上吧。
    Grunt的作用,按任务目标大致可分为四类:
    1. 文件操作型:比如合并、压缩js和css文件等(包括)。
    2. 预编译型:比如编译less、sass、coffeescript等。
    3. 类库项目构建型:比如 angular、ember、backbone等.
    4. 工程质量保障型:比如jshint、jasmine、mocha等.

学习历程

  • 1.安装nodejs

grunt必须依赖于node.js,基于先学习好grunt的目的,那么首先,我们要安装node.js, https://nodejs.org/zh-cn/download/

  • 2.新建一个项目
  • 3.安装 CLI

在继续学习前,你需要先将Grunt命令行(CLI)安装到全局环境中。安装时可能需要使用sudo(针对OSX、*nix、BSD等系统中)权限或者作为管理员(对于Windows环境)来执行以下命令。

    npm install -g grunt-cli
  • 4.一般需要在你的项目中添加两份文件:package.json 和 Gruntfile.js。

package.json: 此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件,放置于devDependencies配置段内。

Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。 此文档中提到的 Gruntfile 其实说的是一个文件,文件名是 Gruntfile.js 或 Gruntfile.coffee。

大部分 grunt-init 模版都会自动创建特定于项目的package.json文件。
npm init命令会创建一个基本的package.json文件,根据命令提示输入一些项目信息,生成文件,文件内容如下。(也可手动创建文件)

{
  "name": "grunt-demo",
  "version": "10.1.0",
  "description": "aaaaaaaaaaa_demo",
  "main": "./Gruntfile.js",
  "author": "",
  "devDependencies": {
    "grunt": "^1.1.0",
    "grunt-contrib-uglify": "^0.5.1"
  }
}

在工程根目录下运行 npm install
等命令成功跑完之后,在工程根目录中生成了node_modules目录,该目录包含一些必要的插件。
在这里插入图片描述
接下来我们需要Gruntfile.js配置

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      uglify: {
        options: {
          banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
        build: {
          src: 'src/js/*.js',
          dest: 'build/<%= pkg.name %>.min.js'
        }
      }
    });
  
    // 加载包含 "uglify" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-uglify');
  
    // 默认被执行的任务列表。
    grunt.registerTask('default', ['uglify']);
  
  };

接下来我们只需要在工程根目录下,运行命令 grunt
我们可以在根目录看到 动态生成了文件夹 build 如下
在这里插入图片描述

@ 以下部分来自摘抄

接下来我们来重点看下Gruntfile.js代码的含义。

所有grunt的代码,必须放在module.exports函数内,参数grunt为grunt对象,当你运行命令grunt时,grunt系统会去读此函数的grunt构建配置。

grunt.initConfig(obj)

initConfig用于配置构建信息,第一个参数必须是个object。

// 构建任务配置

grunt.initConfig({
 
});
grunt.file.readJSON(path)

读取一个json文件,通常我们会把构建任务的基本配置写在独立的json文件内,方便我们修改。

// 构建任务配置

grunt.initConfig({
    //读取package.json的内容,形成个json数据
    pkg: grunt.file.readJSON('package.json')
});
grunt.loadNpmTasks(pluginName).
//加载指定插件任务.
grunt.registerTask(taskName,taskArray)
//注册任务,比如下面的代码:
grunt.registerTask('default', ['concat','uglify']);
//注册默认执行的任务,即你运行grunt命令时,触发的任务构建。 第二个参数为任务目标名,在initConfig()中配置

// 配置

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
        options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
        build: {
            src: 'src/js/*.js',
            dest: 'build/<%= pkg.name %>.min.js'
        }
    }
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
学习成为一名Java全栈工程师需要按照一定的顺序逐步学习。首先,我们需要掌握Java编程语言的基础知识,包括语法、面向对象编程、集合框架等。接着,可以学习一些常用的开发工具,比如Eclipse、IntelliJ IDEA等,同时学习一些常用的版本控制工具,比如Git。然后,需要学习Web开发的基础知识,比如HTML、CSS、JavaScript等,还要学习一些常见的前端框架,比如React、Angular等。 在掌握了基础知识之后,可以着手学习JavaEE框架,比如Spring、SpringMVC、MyBatis等,还需要学习一些常用的数据库,比如MySQL、Oracle等,和一些常用的数据库操作语言,比如SQL语言。接下来,可以学习一些常用的服务器,比如Tomcat、Nginx等,以及一些常用的操作系统,比如Linux、Windows等。 在掌握了JavaEE框架和数据库之后,可以着手学习一些常用的前端框架,比如Bootstrap、jQuery等,同时学习一些常用的前端构建工具,比如Webpack、Grunt等。接着,可以学习一些常用的后端框架,比如Node.js、Express等,还需要学习一些常用的后端数据库,比如Redis、MongoDB等。 最后,需要学习一些常用的开发工具和部署工具,比如Docker、Jenkins等,还需要学习一些基本的网络知识,比如HTTP、TCP/IP等。学习成为一名Java全栈工程师需要踏实地逐步学习,不断积累知识和经验,才能成为一名优秀的全栈工程师。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值