grunt安装，配置记录

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

　　项目最开始，还是从搭建新的开发环境开始吧，叫什么来着，要想砍树，必先磨刀！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任务执行结束。

 

转载于:https://www.cnblogs.com/malvina/p/4986245.html