web前端开发环境搭建（grunt）

来源：互联网发布：狂三校服手办淘宝编辑：程序博客网时间：2024/05/16 15:50

web前端开发环境搭建（grunt）

本文参考：用grunt搭建自动化的web前端开发环境-完整教程

以上推荐文章已经很详细的讲解了node.js grunt的安装，今天重点写一下有关web前端开发插件的安装。

在package.json中可定义一些参数如name、version、author等。在Gruntfile.js中通过grunt.file.readJSON('package.json') 引入文件，然后可通过如<%=pkg.name%>访问package.json中定义的参数。package.json中，“devDependencies”参数为自动生成，包含项目依赖的所有插件。在dos中，cd到指定目录下，通过如：

npm install grunt-contrib-uglify --save-dev 安装插件，并生成依赖。grunt-contrib-uglify为依赖插件的名称，官网http://www.gruntjs.net/plugins可查询。

{  "name": "name",  "version": "1.0.0",  "description": "frame",  "author": "lvyang",  "devDependencies": {    "grunt": "^0.4.5",    "grunt-contrib-cssmin": "^0.14.0",    "grunt-contrib-uglify": "^0.11.0"  }}

在Gruntfile.js中，基本代码如下

module.exports = function(grunt){grunt.initConfig({pkg:grunt.file.readJSON('package.json'),});};

一、uglify （用于压缩javascript文件）

在dos中，cd到项目目录下，运行npm install grunt-contrib-uglify --save-dev 安装uglify插件。在package.json中会自动生成"grunt-contrib-uglify": "^0.11.0"依赖。

在grunt.initConfig方法中，添加代码：

uglify:{options: {stripBanners: true,banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n'},my_target: {       files: {          'js/min/index.js.min.js': ['js/index.js','js/jquery-1.11.1.js']       }}       },

在files中可以将多个js文件合并/压缩成一个js文件，如：'js/min/<%=pkg.name%>-<%=pkg.version%>.js.min.js': ['js/ZYXB.js','js/jquery-1.11.1.js']。也可以对不同的js文件分别进行压缩，如：'js/min/index.js.min.js': ['js/index.js'] , 'js/min/jquery-1.11.1.min.js':['js/jquery-1.11.1.js'] 。

二、cssmin（用于压缩css文件）

运行npm install grunt-contrib-cssmin --save-dev 安装uglify插件。在package.json中会自动生成"grunt-contrib-cssmin": "^0.14.0"依赖。

在grunt.initConfig方法中，添加代码：

cssmin: {options: {    shorthandCompacting: false,    roundingPrecision: -1  },  target: {    files: {      'css/min/main.min.css': ['css/main.css','css/style.css']      //'css/min/style.min.css':['css/style.css']    }  }}

在files中可以将多个css文件合并压缩成一个css文件，如：'css/min/main.min.css': ['css/main.css','css/style.css']。也可以对不同的css文件分别进行压缩，如：'css/min/main.min.css': ['css/main.css','css/style.css'],'css/min/style.min.css':['css/style.css'] 。

1 0