grunt 單獨壓縮多個js和css文件

菁清siso 2016-09-09

展開全文

一，什么是grunt，

grunt是一套前端自動化工具，一個基于nodeJs的命令行工具，一般用于：

① 壓縮文件

② 合并文件

③ 簡單語法檢查

對于其他用法，我還不太清楚，我們這里簡單介紹下grunt的壓縮、合并文件

二，準備階段

1，nodejs環(huán)境

因為grunt是基于nodeJs的，所以首先各位需要安裝nodeJS環(huán)境

安裝nodejs。

安裝好之后檢查

打開cmd

輸入：node -v

輸出：v0.10.28(這個是我的版本)

三，安裝grunt

有了nodeJs環(huán)境后，我們便可以開始搞grunt了，因為我們可能在任何目錄下運行打包程序，所以我們需要安裝CLI官方推薦在全局安裝CLI（grunt的命令行接口）

輸入：npm install -g grunt-cli

這條命令將會把grunt命令植入系統(tǒng)路徑，這樣就能在任意目錄運行他，原因是

每次運行g(shù)runt時，它都會使用node的require查找本地是否安裝grunt，如果找到CLI便加載這個本地grunt庫然后應(yīng)用我們項目中的GruntFile配置，并執(zhí)行任務(wù)

ps這里安裝好后一般在我們的C:\Users\SOS\AppData\Roaming\npm\node_modules

會看到grunt-cli文件

四，添加package.json和Gruntfile.js文件

package.json

代碼如下：

{
  "name": "test",
  "version": "0.1.0",
  "description": "test",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-concat": "~0.3.0",
    "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"
  },
  "dependencies": {
    "express": "3.x"
  }
}

Gruntfile.js

代碼如下：

module.exports = function (grunt) {
  // 構(gòu)建任務(wù)配置
  grunt.initConfig({
    //讀取package.json的內(nèi)容，形成個json數(shù)據(jù)
    pkg: grunt.file.readJSON('package.json'),
    //壓縮js
    uglify: {
      //文件頭部輸出信息
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      my_target: {
        files: [
          {
            expand: true,
            //相對路徑
            cwd: 'js/',
            src: '*.js',
            dest: 'dest/js/',
            rename: function (dest, src) {  
                  var folder = src.substring(0, src.lastIndexOf('/'));  
                  var filename = src.substring(src.lastIndexOf('/'), src.length);  
                  //  var filename=src;  
                  filename = filename.substring(0, filename.lastIndexOf('.'));  
                  var fileresult=dest + folder + filename + '.min.js';  
                  grunt.log.writeln("現(xiàn)處理文件："+src+"  處理后文件："+fileresult);  
                  return fileresult;  
                  //return  filename + '.min.js';  
                } 
          }
        ]
      }
    },
    //壓縮css
    cssmin: {
      //文件頭部輸出信息
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
        //美化代碼
        beautify: {
          //中文ascii化，非常有用！防止中文亂碼的神配置
          ascii_only: true
        }
      },
      my_target: {
        files: [
          {
            expand: true,
            //相對路徑
            cwd: 'css/',
            src: '*.css',
            dest: 'dest/css/',
            rename: function (dest, src) {  
                var folder = src.substring(0, src.lastIndexOf('/'));  
                var filename = src.substring(src.lastIndexOf('/'), src.length);  
                //  var filename=src;  
                filename = filename.substring(0, filename.lastIndexOf('.'));  
                var fileresult=dest + folder + filename + '.min.css';  
                grunt.log.writeln("現(xiàn)處理文件："+src+"  處理后文件："+fileresult);  
                return fileresult;  
                //return  filename + '.min.js';
                }
          }
        ]
      }
    }
  });
  // 加載指定插件任務(wù)
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  // 默認執(zhí)行的任務(wù)
  grunt.registerTask('default', ['uglify', 'cssmin']);
};