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

来源：互联网发布：雅思作文知乎simon 编辑：程序博客网时间：2024/05/16 17:45

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

0 0