使用grunt压缩,合并前端代码

25 篇文章 1 订阅
57 篇文章 34 订阅

-- 安装nodejs

Windows下安装nodejs,点击这里,其他系统会安装软件,nodejs就会安装,nodejs安装还是很简单的.

-- 安装grunt

使用npm全局安装,命令:
npm install -g grunt-cli

-- 测试压缩

-- npm init

npm init创建package.json文件

加入依赖的包.package.json内容
{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "zwj",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}


-- npm install

npm install下载所有的依赖包

-- gruntfile文件

gruntfile.js
/*
2016年8月9日11:32:30
动态数据标签和ejs模板类似 <%= %>
 */
module.exports = function(grunt) {

  grunt.initConfig({
  	//读取package.json文件信息
    pkg: grunt.file.readJSON('package.json'),
    
    //定义任务
    uglify: {
      options: {
      	//压缩后的文件注释信息
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
      	//需要压缩的文件
        src: 'src/<%= pkg.name %>.js',
        //压缩后的文件
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 默认被执行的任务列表。
  grunt.registerTask('default', ['uglify']);

};

-- 创建需要压缩的文件

src文件夹下demo1.js,内容就复制 gruntfile.js这个文件里的内容.
一切就绪.

-- 运行

-----运行前目录:

-----运行:

-----运行后:

自动创建了个build文件夹,并压缩生成了demo1.min.js文件

-- 测试合并

-- 再在src下加入demo2.js,和demo3.js内容和demo1.js一样,然后合并这3个文件.
-- 修改gruntfile.js文件
/*
2016年8月9日11:32:30
动态数据标签和ejs模板类似 <%= %>
 */
module.exports = function(grunt) {

  grunt.initConfig({
  	//读取package.json文件信息
    pkg: grunt.file.readJSON('package.json'),

    //定义任务
    uglify: {
    	 options: {
      	//压缩后的文件注释信息
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      "files": {
        "files": {
          'build/demos.min.js': ['src/demo1.js', 'src/demo2.js', 'src/demo3.js']
        }
      }
    }
  });

  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 默认被执行的任务列表。
  grunt.registerTask('default', ['uglify']);

};
------运行前:

------运行后:

nodejs专栏:点击这里
grunt插件列表:点击这里
评论 2 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

意外金喜

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值