码迷,mamicode.com
首页 > Web开发 > 详细

grunt 合并压缩js和css文件(二)

时间:2017-07-24 00:01:56      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:concat   config   模块   node   html   www   mod   pac   加载   

具体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文件(二)

标签:concat   config   模块   node   html   www   mod   pac   加载   

原文地址:http://www.cnblogs.com/congxueda/p/7226416.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!