1.认识grunt

   grunt是什么:他是一套前端自动化工具,是一个基于nodejs的命令行工具。(Grunt和Grunt插件是通过npm  安装并管理的,所以首先要安装nodejs)。

grunt能干什么:1.压缩文件  2.合并文件  3.简单的语法检查  4.监听文件变动 5.less编译

   grunt优点:1.减轻劳动,简化工作  2.免费,没有盗版   3.插件多,而且可以自己编写插件

2.grunt安装与使用

  第一步:添加package.json和gruntfile.js文件

    package.json配置项的添加方式:

    a:手动添加  (下面内容已经将基本的grunt插件写好)

    {
      "name": "grunt_test",
      "version": "0.0.1",
      "description": "grunt test",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "devDependencies": {
        "grunt": "^0.4.5",
        "grunt-contrib-jshint": "*",
        "grunt-contrib-uglify": "*", 
        "grunt-contrib-cssmin":"*", 
        "grunt-contrib-imagemin":"*", 
        "grunt-contrib-watch": "*", 
        "grunt-contrib-concat":"*" 
      },
      "keywords": [
        "grunt"
      ],
      "author": "caihe",
      "license": "ISC"
    }  

    说明:

      grunt-contrib-jshint: 检查javascript语法

      grunt-contrib-uglify: 压缩以及合并js文件

      grunt-contrib-cssmin:压缩以及合并css文件

      grunt-contrib-imagemin:图像压缩模块

      grunt-contrib-watch:监视文件变动,做出相应动作

      grunt-contrib-concat:合并文件

    然后cmd窗口中进入到当前项目的根目录输入命令行  :npm  install

    b:命令行实现:npm install grunt-contrib-jshint --save-dev等

    gruntfile.js文件配置:

    gruntfile.js 的作用1.读取package.json的信息  2.插件加载、注册任务、运行任务

    module.exports = function(grunt){
      //项目配置
      grunt.initConfig({
        //读取配置项
        pkg:grunt.file.readJSON("package.json"),
        //具体任务
        uglify:{
          options:{
            //加注释
            banner:"/* 这个文件 <%= pkg.name %><%= pkg.version%> \n*/"
          },
          build:{
            //被压缩的文件的路径
            src: "src/jquery-1.9.1.js",
            //被压缩后的文件路径
            dest:"dest/jquery-1.9.1.min.js"
          }
        },
        //合并
        concat:{
          options:{
            //加注释
            banner:"/* 这个文件 <%= pkg.name %><%= pkg.version%> 合并的js\n*/"
          },
          build:{
            //被压缩的文件的路径
            src: "src/*.js",
            //被压缩后的文件路径
            dest:"dest/concat.js"
          }
        },
        jshint: {
          files: ['Gruntfile.js'],
            options: {
          }
        },
        watch: {
          files: ['src/*.html','src/*.css'],
          tasks: ['jshint']
        }
      });
      //加载插件
      grunt.loadNpmTasks("grunt-contrib-uglify");
      grunt.loadNpmTasks('grunt-contrib-jshint');
      grunt.loadNpmTasks('grunt-contrib-watch');
      grunt.loadNpmTasks('grunt-contrib-concat');
      //默认执行任务
      grunt.registerTask("default",["uglify","concat","jshint",'watch']);
    };

     然后cmd窗口中进入到当前项目的根目录输入命令行  :grunt

    可执行grunt任务grunt watch可监听文件变化

windows下grunt的快速入门的更多相关文章

  1. Windows下通过脚本快速修改IP地址

    Windows下通过脚本快速修改IP地址 如果通过Windows的网络属性修改Ip/网关,真是太麻烦了. 经常要切换ip,所以我写了两个脚本: c:\办公室.bat netsh interface i ...

  2. windows下Graphviz安装及入门教程

    下载安装配置环境变量 intall 配置环境变量 验证 基本绘图入门 graph digraph 一个复杂的例子 和python交互 发现好的工具,如同发现新大陆.有时,我们会好奇,论文中.各种专业的 ...

  3. windows下用wubi快速安装ubuntu

    由于开发需要,我们可能要用到ubuntu,然而又不能完全抛弃windows,于是双系统是个不错选择. wubi是一个在windows下快速安装ubuntu双系统的工具,它包含在ubuntu 12及以前 ...

  4. IDEA工具下Mybaties框架快速入门程序

    本篇文章介绍在IDEA工具下mybatis快速入门程序分为以下五步 ​ 1 添加依赖包 ​ 2 编写pojo对象 ​ 3 编写映射文件 ​ 4 编写核心配置文件 ​ 5 测试框架 详细如下 建立Mod ...

  5. Windows下RabbitMQ安装及入门

    1.Windows下安装RabbitMQ需要以下几个步骤 (1):下载erlang,原因在于RabbitMQ服务端代码是使用并发式语言erlang编写的,下载地址:http://www.erlang. ...

  6. [转]RabbitMQ系列(一):Windows下RabbitMQ安装及入门

    https://blog.csdn.net/hzw19920329/article/details/53156015 1.Windows下安装RabbitMQ需要以下几个步骤 (1):下载erlang ...

  7. :Windows下RabbitMQ安装及入门

    1.Windows下安装RabbitMQ需要以下几个步骤 (1):下载erlang,原因在于RabbitMQ服务端代码是使用并发式语言erlang编写的,下载地址:http://www.erlang. ...

  8. 在WINDOWS下 三步快速配置 eclipse c++ 环境

    所需软件 1.Eclipse IDE for C/C++ Developers http://www.eclipse.org/downloads/packages/eclipse-ide-cc-dev ...

  9. Windows下vue-cli脚手架搭建入门<一>

    简单了解Node.js.npm,安装Node.js,下载网址:http://nodejs.cn/download/ 查看node,npm安装成功与否.打开cmd命令行,输入命令 node-v  .np ...

随机推荐

  1. django-haystack全文检索详细教程

    前几天要用Django-haystack来实现搜索功能,网上一搜中文资源少之又少,虽说有官方文档,但相信对于我们这些英语差的同学来说要看懂真的是一件难事.特别是关于高级部分,特地找了个英语专业的来翻译 ...

  2. 创造DotNet Core轻量级框架【一】

    前言 net core 已经出了很久了,网上的各种框架也很多了,但是没看到一个很小很轻的框架,基本都是那种啥功能都有,但是我需要的功能只占他们框架的百分之几,很少很少,所以自己创造一个框架. 因为之前 ...

  3. 带"反悔"的贪心-超市

    题面:https://www.acwing.com/problem/content/description/147/ 超市里有N件商品,每个商品都有利润pi和过期时间di,每天只能卖一件商品,过期商品 ...

  4. STL下<algorithm>下的sort函数

    定义: sort函数用于C++中,对给定区间所有元素进行排序,默认为升序,也可进行降序排序.sort函数进行排序的时间复杂度为nlog2n,比冒泡之类的排序算法效率要高,sort函数包含在头文件为#i ...

  5. Day_09【常用API】扩展案例5_获取长度为5的随机字符串,字符串由随机的4个大写英文字母和1个0-9之间(包含0和9)的整数组成

    分析以下需求,并用代码实现 1.定义String getStr(char[] chs)方法 功能描述:获取长度为5的随机字符串,字符串由随机的4个大写英文字母和1个0-9之间(包含0和9)的整数组成 ...

  6. Android 开发技术周报 Issue#279

    新闻 丧心病狂or形势所迫?谈谈Android奇葩的"链式启动" 传闻称Android TV将更名为Google TV 谷歌官宣Android 11 Beta发布会:6月3日见 教 ...

  7. HDU-6351 Beautiful Now 全排列暴力

    Beautiful Now 题意 给出一个最大为10^9的数字n,以及一个k,你最多交换n中任意两个位置的数字k次,问形成的最大数字和最小数字. 思路 看到这题,我靠这题暴力交换一下,不难啊,咋没人做 ...

  8. 设计模式之GOF23享元模式

    享元模式FlyWeight 场景:如果有很多个完全相同或者相似的对象,可以节省内存资源 核心: 享元模式以共享的方式高效地支持大量细粒对象的重用 享元对象做到共享的关键是区分了内部状态和外部状态: 内 ...

  9. IDC预测2020云服务逆势增长!云服务器已成上云首选

    IDC预测2020云服务逆势增长!云服务器已成上云首选 据IDC最新预测指出,2020年IT基础设施支出今年将增长约4%,达到2370亿美元,驱动力主要来源于云服务. 受疫情的影响,不少企业开源节流, ...

  10. 微信浏览器中禁止下拉出现网页由xxx.xxxxx.com提供,QQ浏览器X5内核提供技术支持这个

    直接上代码 window.onload = function(){ document.body.addEventListener('touchmove', function (e) { e.preve ...