进了新的公司,需要重构一个项目,从头开始。本人患懒癌已久,一直没有写博客的打算,也是因为资质还比较浅,写不出什么富有涵养的内容,后来想了想,就当自己的笔记吧。这次从新开始,未尝不是一个博客开始的好时机,所以,慢慢来吧。。

  项目最开始,还是从搭建新的开发环境开始吧,叫什么来着,要想砍树,必先磨刀!grunt工具是我最先接触到的前端打包工具,包括less编译,js文件压缩,css文件压缩等功能。所以还是先把这个工具研究透一点。。

  1、首先,grunt有官方网站:http://www.gruntjs.net/

  借用官网的一句话:grunt是通过npm来管理的,npm是node.js的管理工具。所以首先你需要安装node的环境,node官网:https://nodejs.org/en/,node最好是安装在全局的环境中。

  接着,在你安装好npm后,在你的项目文件下,打开cmd命令行,输入npm install -g grunt-cli

  

  是的,运行完了,然而文件夹里并没有什么变化,这个时候缺一个文件,package.json文件,看看我的package.json文件怎么配置的咯

  {
      "name": "demo",
      "version": "0.1.0",
      "description": "demo",
      "license": "MIT",
      "devDependencies": {
        "grunt": "~0.4.1",
        "grunt-contrib-jshint": "~0.6.3",
        "grunt-contrib-uglify": "~0.2.1",
        "grunt-contrib-requirejs": "~0.4.1",
          "grunt-contrib-copy": "~0.4.1",
        "grunt-contrib-clean": "~0.5.0",
          "grunt-strip": "~0.2.1",
          "grunt-contrib-concat":"~0.1.1",
          "grunt-css":  ">0.0.0",
          "grunt-contrib-less": "*",
          "grunt-contrib-cssmin": "*",
        "grunt-contrib-watch": "*"
      },
    "dependencies": {
        "express": "3.x"
    }
  }

  2、可以直接手动新建一个packege.json文件,将上面的配置代码复制到新建的文件中。

  packge.json文件建好后,在cmd命令行中运行: npm install

  

  是的,命令运行后,文件目录中新增了node_modules文件夹,里面是你配置的packge.json文件里需要加载的文件。

 3、好的,现在grunt配置文件搭好了,工具备好了,还差一个策划方案了,也就是grunt任务,里面配置你真正的执行任务,Gruntfile.js文件。一样,先看看我的gruntfile里有什么任务吧。

  module.exports = function (grunt) {
    // 项目配置
    var config = {
      pkg: grunt.file.readJSON('package.json'),
      uglify: {
        build: {
          src: 'src/a.js',
          dest: 'dest/min/a.min.js'
        }
      },
     copy: {
      main: {
        files: [{
          src: 'src/a.js',
          dest: 'dest/js/a.js'
        },{
          src: 'dest/min/a.min.js',
          dest: 'dest/js/a.min.js'
        }]
      }
    }

  };

   grunt.initConfig(config);
    // 加载提供"uglify"任务的插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-copy');
    // 默认任务
    grunt.registerTask('build', ['uglify','copy:main']);
  }

  4、如上述代码,我所要做的是一个压缩和拷贝的两个任务,那么看看我们的结果吧。cmd命令运行:grunt build

  

  哒哒,运行成功,看下我们的文件夹出现了什么变化呢?

  解释一下我的任务做了什么哈:

  1、uglify:将我建在src文件下的a.js文件,压缩到到min目录下,a.min.js文件

  2、copy:  将src下的原a.js文件 和 min目录下的a.min.js文件拷贝到dest目录里

  从我的截图可以看出,文件大小变了哦,好了,grunt任务执行结束。

grunt安装,配置记录的更多相关文章

  1. Grunt安装配置教程:前端自动化工作流

    Grunt这货是啥? Grunt 是一个基于任务的 JavaScript 项目命令行构建工具. 最近很火的前端自动化小工具,基于任务的命令行构建工具 http://gruntjs.com Grunt能 ...

  2. UBuntu安装配置记录

    记得是06年左右第一次安装的 Linux,当时是下载的 Fedora镜像,版本已经记不清了,在商业街的电脑维修店刻的盘,回来后兴冲冲地和XP一起安装的双系统.其实就是直接的体验了一把,只是看了看X-W ...

  3. win8下nodejs安装配置记录

    1:打开nodejs官网http://nodejs.org/ 下载安装版. 2:安装完成后,打开cmd输入node -v 查看是否安装成功: 3:安装express,通过全局安装方式进行安装: 安装完 ...

  4. fedora23安装配置记录

    一.安装fedora 1.下载fedora的镜像文件,个人比较喜欢gnome,因而直接下载工作站版本了! http://start.fedoraproject.org/这个是浏览器首页,提供了fedo ...

  5. appium 使用环境安装配置记录

    一.安装配置Java (cmd输入java,回车,没有出现“不是内部或外部命令,也不是可运行的程序或批处理文件”,即为成功) 二.安装node.js (cmd输入node -v,显示版本号即为成功) ...

  6. gerrit安装配置记录

    gerrit安装配置 java -jar gerrit-2.13.5.war init -d gerrit Authentication method [OPEN/?]: htt Install Ve ...

  7. SSDB安装配置记录

    SSDB的性能很突出,与Redis基本相当了,Redis是内存型,容量问题是弱项,并且内存成本太高,SSDB针对这个弱点,使用硬盘存储,使用Google高性能的存储引擎LevelDB,适合大数据量处理 ...

  8. CentOS 6.6下Redis安装配置记录

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/120.html?1455855209 在先前的文章中介绍过redis,以下 ...

  9. Ubuntu20.04 PostgreSQL 14 安装配置记录

    PostgreSQL 名称来源 It was originally named POSTGRES, referring to its origins as a successor to the Ing ...

  10. FreeSwitch安装配置记录

    安装FreeSwitch 主要命令如下: git clone -b v1.2.stable git://git.freeswitch.org/freeswitch.gitcd freeswitch/. ...

随机推荐

  1. 原创Couldn't read packet: Connection reset by peer 错误排查思路(推荐)

    作为一个运维 不是你懂多少知识才是你的价值 你有幸能遇到多少错误才是你的最大的价值 知识 你有我有大家有  错误我有你没有 这便是我的价值 我遇到一个错误 蛮难遇到的一个错误 所以想分享给大家 下面我 ...

  2. 在2015年 开发一个 Web App 必须了解的那些事

    在过去的一年里,我在从头开始开发我的第一个重要的Web应用.经验教会了很多以前不知道的东西,特别是在安全性和用户体验方面. 值得一提的是,我上一次尝试构建的任何合理复杂性是在2005年.所以,在安全防 ...

  3. Android(java)学习笔记180:多媒体之图形的变化处理

    1. 图形的缩放 (1)布局文件activity_main.xml如下: <LinearLayout xmlns:android="http://schemas.android.com ...

  4. nodeJS和npm的环境配置

    1.windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(http://nodejs.org/),便可以看到首页的“INSTALL” ...

  5. Bézier surface(贝塞尔曲面)

    Bézier surface(贝赛尔曲面) 贝塞尔曲面是一种用于计算机图形学.计算机辅助设计和有限元建模的数学样条.与贝塞尔曲线一样,贝塞尔曲面由一组控制点定义.与插值在许多方面相似,一个关键的区别是 ...

  6. 1、C编程预备计算机知识

    一.数据类型 基本数据类型 1.整数 整形 -- int -- 4 短整型 -- short int -- 2 长整型 -- long int --8 2.浮点数(实数) 单精度浮点数 -- floa ...

  7. Navicat Premium 12试用期的破解方法

    参考:https://blog.csdn.net/Jason_Julie/article/details/82864187 已测可用

  8. Linux下QT、cannot find -lGL、

    近日在虚拟机下的QT5.11.2安装出现了一个bug,折腾好久才搞定. 环境:vmware + debain 9.5 + qt5.11.2 . QT_DIR = /Qt5.11.2/5.11.2/gc ...

  9. Memcached的安装和应用

    Memcached的安装 1.安装libeventlibevent是一个事件触发的网络库,适用于windows.linux.bsd等多种平台,内部使用 select.epoll.kqueue等系统调用 ...

  10. python实现快速排序、冒泡

    快速排序:首先任意选取一个数据(通常选用数组的第一个参数)作为关键数据,然后将比它小的数放在它前面,比它大的数放在后面,这个过程称之为快速排序 def quick_sort(l): if len(l) ...