web前端开发环境搭建(grunt)
2016-01-22 13:35
411 查看
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可查询。
在Gruntfile.js中,基本代码如下
一、uglify (用于压缩javascript文件)
在dos中,cd到项目目录下,运行npm install grunt-contrib-uglify --save-dev 安装uglify插件。在package.json中会自动生成"grunt-contrib-uglify": "^0.11.0"依赖。
在grunt.initConfig方法中,添加代码:
在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方法中,添加代码:
在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'] 。
本文参考:用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'] 。
相关文章推荐
- js之执行环境(作用域)与作用域链深入剖析
- html5页面缓存设置
- 利用 CSS 进行网页布局
- NodeJS - NPM - Edge - Connect NodeJs and .Net
- 快慢指针-----Remove Nth Node From End of List
- JavaScript正则表达式
- 手机wap应用alert自写样式
- html5多文件上传代码
- Different Ways to Add Parentheses
- html5读取本地文件 图片上传 示例代码
- HTML5新特点实现图片文件异步上传
- html5页面布局 最基本的规范
- 一览HTML5新特性
- HTML5预加载功能
- 获取HTML5视频时长的方法
- 公历和农历转换的JS代码
- 新增的8类 HTML5 INPUT输入类型介绍
- div+CSS实现页面的布局要点记录
- JS2
- js1