grunt 合并压缩js和css文件

Posted 2020-09-29 SeaJson

具体node及文件配置请看：

grunt 安装使用（一）

 

要压缩的文件

--src/
  ajax.js
  assets.js
  touch.js
  zepto.js

 

目录结构：

dist/
node_modules/
src/
Gruntfile.js
package.json
package.json是依赖库文件
Gruntfile.js是执行步骤程序

 

 

一、js合并压缩

第一次需要先安装grunt。执行 npm install -g grunt-cli 进行安装。如果已经安装，可以忽略。

 

1.package.json文件

  安装所需要的依赖文件

{
  "name": "grunt_test",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-uglify": "^3.0.1"
  }
}

 

安装命令：

cnpm install grunt-contrib-concat --save-dev

 

 2.Gruntfile.js

这个文件是配配置文件

module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON(\'package.json\'),
    uglify:{
      js:{
        files:[{
          expand: true,
          cwd: \'src/js\',
          src: \'**/*.js\',
          dest: \'dist/js\'
        }]
      }
    },
    concat:{
      js:{
         src: \'dist/**/*.js\',
         dest: \'dist/index.min.js\'
      }
    }
  });
  grunt.loadNpmTasks(\'grunt-contrib-uglify\');
  grunt.loadNpmTasks(\'grunt-contrib-concat\');
  // 默认任务
  grunt.registerTask(\'default\', [\'uglify\', \'concat\']);
}

 

这里加深的是js 要合并文件，同时需要加载模块及默认执行任务。

执行

grunt

在当前目录下生成dist目录

dist / 

index.min.js

同理

css压缩也是一样的。