首页 > 代码库 > grunt 合并压缩js和css文件（二）

grunt 合并压缩js和css文件（二）

2024-11-04 16:41:01   204人阅读

具体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压缩也是一样的。

 

grunt 合并压缩js和css文件（二）


联系
我们