Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置

前言：

以现在前端js激增的态势，一个项目下来几十个js文件轻轻松松
对于复杂一点的单页应用来说，文件上百简直是家常便饭，那么这个时候我们的js文件应该怎么处理呢？

另外，对于css文件，又该如何处理呢？？

这些都是我们实际工作中遇到的问题，对于页面的优化，减少http请求特别重要；

Grunt干什么的？

是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：
① 压缩文件
② 合并文件
③ 简单语法检查

 

grunt 有很多用处，这里只简单介绍下我知道的文件压缩，合并，初学，多指教，写出来提高记忆！

准备阶段：

1，安装nodeJs环境

因为grunt是基于nodeJs的，所以要首先安装nodejs环境，nodejs 可以到官网上下载安装 ，傻瓜式的安装很简单

2，安装grunt

有了nodejs环境以后，我们便可以开始安装grunt了，因为我们有可能在任何目录下运行打包程序，所以我们安装CLI,官方推在全局安装CLI(grunt的命令接口)；

打开nodej的命令窗口输入以下命令进行安装grunt：

npm install -g grunt-cli

 实战学习

在用grunt例子之前，先建立一个grunt文件夹，在里面增加两个文件

package.json

{
  "name": "grunt-study",
  "version": "1.0.0",
  "description": "study",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/hubcarl"
  },
  "devDependencies":{
    "matchdep": "latest",
    "shelljs": "latest",
    "ngmshell": "latest",
    "grunt": "latest",
    "grunt-contrib-clean": "latest",
    "grunt-contrib-concat": "latest",
    "grunt-contrib-copy": "latest",
    "grunt-contrib-connect": "latest",
    "grunt-contrib-htmlmin": "latest",
    "grunt-contrib-cssmin": "latest",
    "grunt-contrib-imagemin": "latest",
    "grunt-contrib-uglify": "latest",
    "grunt-contrib-watch": "latest",
    "grunt-usemin": "latest",
    "connect-livereload": "latest"
  },
  "keywords": [
    "grunt"
  ],
  "author": "bluesky",
  "license": "BSD-2-Clause",
  "bugs": {
    "url": "https://github.com/hubcarl"
  }
}

 Gruntflie.js

module.exports = function (grunt) {  
  grunt.initConfig({  
    pkg: grunt.file.readJSON('package.json'),
  concat: {  
    options: {  
    },  
    //合并文件
    dist: {  
      src: ['src/style2.css','src/style1.css'],//src文件夹下包括子文件夹下的所有文件  
      dest: 'dist/built.css'//合并文件在dist下名为built.js的文件  
    }  
  },  
  //压缩js
  uglify: {  
     build: {  
        src: 'dist/built.js',//压缩源文件是之前合并的buildt.js文件  
        dest: 'dist/built.min.js'//压缩文件为built.min.js  
      }  
   },
   //压缩css
    cssmin: {
      files: {  
        src: 'dist/built.css',//压缩源文件是之前合并的buildt.js文件  
        dest: 'dist/built.min.css'//压缩文件为built.min.js  
      }  
     } 
});  
  grunt.loadNpmTasks('grunt-contrib-uglify');  
  grunt.loadNpmTasks('grunt-contrib-concat');  
   grunt.loadNpmTasks('grunt-contrib-cssmin'); 
    
  grunt.registerTask('default', ['concat','uglify','cssmin','imagemin']);  
}  

这里在D：/Node.js/grunt建立项目目录

安装插件

打开命令窗口，在项目目录下运行一下命令：

npm install grunt-contrib-uglify   安装js压缩插件

npm install grunt-contrib-cssmin 安装cssmin

    'copy',                 //复制文件
    'concat',               //合并文件
    'imagemin',             //图片压缩
    'cssmin',               //CSS压缩
    'uglify',               //JS压缩
    'usemin',               //HTML处理
    'htmlmin'               //HTML压缩

在命令窗口在项目目录下运行npm install将相关的文件下载下来：

目录下就多了这些文件,在grunt/src下面放如js或者css文件

然后配置Gruntfile.js  文件

module.exports = function (grunt) {  
  grunt.initConfig({  
    pkg: grunt.file.readJSON('package.json'),
  concat: {  
    options: {  
    },  
    //合并文件
    dist: {  
      src: ['src/style2.css','src/style1.css'],//src文件夹下包括子文件夹下的所有文件  
      dest: 'dist/built.css'//合并文件在dist下名为built.js的文件  
    }  
  },  
  //压缩js
  uglify: {  
     build: {  
        src: 'dist/built.js',//压缩源文件是之前合并的buildt.js文件  
        dest: 'dist/built.min.js'//压缩文件为built.min.js  
      }  
   },
   //压缩css
    cssmin: {
      files: {  
        src: 'dist/built.css',//压缩源文件是之前合并的buildt.css文件  
        dest: 'dist/built.min.css'//压缩文件为built.min.css 
      }  
     } 
});  
  grunt.loadNpmTasks('grunt-contrib-uglify');  //压缩js的插件
  grunt.loadNpmTasks('grunt-contrib-concat');  //合并文件的插件
   grunt.loadNpmTasks('grunt-contrib-cssmin'); //压缩css的插件
    
  grunt.registerTask('default', ['concat','uglify','cssmin','imagemin']);   //这里需要把插件的名字写到数组中
}  

 

然后修改配置文件 在命令窗口中运行grunt :

在相应的文件夹中得到合并文件和压缩文件；

 

参考文献：

http://www.cnblogs.com/yexiaochai/p/3594561.html

http://www.k68.org/?p=1232

http://www.cnblogs.com/hubcarl/p/4095122.html

http://www.gruntjs.net/getting-started#grunt

 

转载于:https://www.cnblogs.com/yoyoqd0512/p/4755228.html