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

-- 安装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插件列表:点击这里

时间: 2024-07-29 02:22:48

使用grunt压缩,合并前端代码的相关文章

grunt压缩合并js

[grunt整合版]30分钟学会使用grunt打包前端代码 grunt 准备阶段 1.nodeJs环境 2.安装grunt 实例学习:打包zepto ① package.json ② Gruntfile.js 认识Gruntdile与package.json package.json Gruntfile 合并文件 合并requireJS管理的文件 配置任务/grunt.initConfig grunt插件 grunt-contrib-unglify grunt-contrib-concat gr

折腾一两天,终于学会使用grunt压缩合并混淆JS脚本,小激动,特意记录一下+spm一点意外收获

很长时间没有更新博客了,实在是太忙啦...0.0 ,以下的东西纯粹是记录,不是我原创,放到收藏夹还担心不够,这个以后常用,想来想去,还是放到这里吧,,丢不了..最后一句废话,网上搜集也好原创也罢,能解决问题不糊弄人才是真道理! 反正我的问题解决啦!!!哈哈哈!! 安装grunt 原文:www.bluesdream.com/blog/Windows-installs-the-grunt-and-instructions.html 怕这个网址打不开,记录下: 安装Grunt:如果你之前安装过老的0.

关于requirejs和grunt压缩合并是否矛盾

requirejs主要是为了模块化开发,这样带来的好处不言而喻.但是分成多个js文件增加了请求数,那么就要用到合并压缩.合并压缩了原来的许多独立的js模块,那requirejs又是怎么冲压缩的文件中找到各个独立的模块进行加载的呢,感觉两者有点冲突,这个问题想了很久也假想了很多可能.在知乎上找到了一个回答,好像有那么点意思. 这个问题设计到多个概念词汇:1:模块化开发:模块化开发无非是为了解耦和代码重用:期间的优势你如果不能理解说明你还没达到那个水平:2:requirejs:requirejs在模

【转载】【grunt整合版】30分钟学会使用grunt打包前端代码

[grunt整合版]30分钟学会使用grunt打包前端代码 grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学,有误请包涵 准备阶段 1.nodeJs环境 因为grunt是基于nodeJs的,所以首先各位需要安装nodeJS环境,这块我们便不管了http://www.cnblogs.com/yexiaochai/p/3527418.html 2.安装

【grunt整合版】30分钟学会使用grunt打包前端代码

grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学,有误请包涵 准备阶段 1.nodeJs环境 因为grunt是基于nodeJs的,所以首先各位需要安装nodeJS环境,这块我们便不管了http://www.cnblogs.com/yexiaochai/p/3527418.html 2.安装grunt 有了nodeJs环境后,我们便可以开始搞grun

[转载]用UglifyJS2合并压缩混淆JS代码——javascript系列

从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏览器就基于V8,同时打开20-30个网页都很流畅.Nodejs标准的web开发框架Express,可以帮助我们迅速建立web站点,比起PHP的开发效率更高,而且学习曲线更低.非常适合小型网站,个性化网站,我们自己的Geek网站!! 关于作者 张丹(Conan), 程序员Java,R,PHP,Java

【grunt整合版】学会使用grunt打包前端代码

grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学,有误请包涵 准备阶段 1.nodeJs环境 因为grunt是基于nodeJs的,所以首先各位需要安装nodeJS环境,这块我们便不管了http://www.cnblogs.com/yexiaochai/p/3527418.html 2.安装grunt 有了nodeJs环境后,我们便可以开始搞grun

30分钟学会使用grunt打包前端代码

grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学,有误请包涵 准备阶段 1.nodeJs环境 因为grunt是基于nodeJs的,所以首先各位需要安装nodeJS环境,这块我们便不管了http://www.cnblogs.com/yexiaochai/p/3527418.html 2.安装grunt 有了nodeJs环境后,我们便可以开始搞grun

Grunt的配置及使用(压缩合并js/css)

Grunt的配置及使用(压缩合并js/css) 安装 前提是你已经安装了nodejs和npm. 你能够在 nodejs.org 下载安装包安装.也能够通过包管理器(比方在 Mac 上用 homebrew,同一时候推荐在 Mac 上用 homebrew). 安装grunt CLI npm install -g grunt-cli 依照官方的说法.grunt-cli仅仅是为了在同一台机器上安装不同的grunt版本号,那么咱们先不去管他. 在项目中使用grunt 首先须要往项目里加入两个文件:pack