grunt 基本使用使用(一)。
使用grunt 之前,需要做一些基本工作。
1、在E盘 新建空文件夹 grunt。
2、在grunt目录下新建package.json 文件,用了存储 npm模块的依赖项。基本依赖块代码如下:
{
"name": "demo",
"file": "zepto",
"version": "0.1.0",
"description": "demo",
"license": "MIT",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-uglify": "~0.2.1",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-strip": "~0.2.1"
},
"dependencies": {
"express": "3.x"
}
}
2、启动命令行:进入E盘,下载相关的js文件包。
这时候会根据package.json里的代码下载相关的grunt插件包。
下载完成后,会自动生成名为 “node_modules”的文件夹,里面便是相关的插件包。
3、新建 Gruntfile.js
该文件主要做两件事:
① 读取package信息
② 插件加载、注册任务,运行任务(grunt对外的接口全部写在这里面)
4、新建src文件夹,分别添加两个测试JS文件---a.js,b.js(代码自己随意写下)。
(一)文件压缩 插件 grunt-contrib-unglify
Gruntfile.js 如下代码
module.exports=function(grunt){
grunt.initConfig({
uglify:{
options:{
banner:'/*this is 文件头注释信息,只会出现一次*/'
},
my_target:{
files:{
'dest/lib.min.js':['src/a.js','src/b.js']
}
}
}
}); grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
使用 grunt 命令,成功后,便可在 生成压缩好后的 lib.min.js 文件。
更多的例子 可以在下载的 /node_modules/grunt-contrib-uglifydocs/uglify-examples.md 查看
(二)文件合并 grunt-contrib-concat
module.exports=function(grunt){
console.log(grunt);
grunt.initConfig({
concat:{
options:{
separator:'/*分隔符*/',
banner:'/*測試*/',
footer:'/*文件尾信息,只会出现一次*/'
}, /* *//*合并成一个文件*//*
dist:{
src:['src/a.js','src/b.js'],
dest:'dist/built.js'
},*/ basic_and_extras: {
files: {
'dist/basic.js': ['src/a.js'],
'dist/with_extras.js': ['src/b.js', 'src/c.js']
}
}
}
}); grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
};
更多的例子可以在 /node_modules/grunt-contrib-contact/contact-examples.md 查看
(三)检测语法知识 grunt-contrib-jshint
该插件用于检测文件中的js语法问题。
Gruntfile.js 里如下:
module.exports=function(grunt){
grunt.initConfig({
jshint:{
all:['src/b.js']
}
}); grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default',['jshint']);
};
如果你确实分号,会有如下提示
如果需要忽视这个,只需要
jshint: {
/* options: {
'-W033': true
},
all:['src/b.js']*/ ignore_warning: {
options: {
'-W033': true
},
src: ['src/b.js']
}
}
以上两种方式都可以忽略 缺少分号 语法错误。
至于类似于 'W033' 这样的警告编码具体含义,可以查看 /node_modules/jshint/src/message.js 。
(四)样式文件 grunt-contrib-cssmin
Gruntfle.js代码如下
module.exports=function(grunt){
console.log(grunt);
grunt.initConfig({
cssmin: {
compress: {
files: {
'dest/car.min.css': [
"src/css/a.css",
"src/css/b.css"
]
}
}
}
}); grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['cssmin']);
};
进入文件所在根目录,输入 grunt 或 grunt cssmin --debug ,执行样式文件压缩。
grunt 基本使用使用(一)。的更多相关文章
- 初学seaJs模块化开发,利用grunt打包,减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
- grunt配置任务
这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...
- 快速开发Grunt插件----压缩js模板
前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...
- 是时候搁置Grunt,耍一耍gulp了
也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...
- 应用Grunt自动化地优化你的项目前端
在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...
- Grunt(页面静态引入的文件地址的改变探究)-V2.0
相关插件的引用: grunt-usemin 对页面的操作 grunt-contrib-cssmin 压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...
- Grunt基本使用-V1.0
浅语:grunt中文网:http://www.gruntjs.net/ 第一步:Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js.然后开始安装 Grunt. 实际上,安装的 ...
- nodejs、npm、grunt——名词解释
最近着手开发一个新项目,打算从工程化的角度整理一套自己的前端开发.发布体系. grunt这些工具,之前别人用我也用,并没有认真想过它们的前世今生,正好趁着这个机会,我来理一理目前业界比较流行这些工具的 ...
- grunt自定义任务——合并压缩css和js
npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...
- Grunt学习使用
原文地址:Grunt学习使用必看 grunt简介神马的不多说,到处一大堆. 我只说说我已经实现了的代码. 按照官方的教程 相信已经配置好了,接下来说 package.json 和 Gruntfile. ...
随机推荐
- oracle 单列索引 多列索引的性能测试
清除oralce 缓存:alter system flush buffer_cache; 环境:oracle 10g . 400万条数据,频率5分钟一条 1.应用场景: 找出所有站点的最新一条数据. ...
- tomcat7 ajax请求服务中文乱码
在确保请求服务编码格式为utf-8的情况下,确保tomcat的配置 <Connector connectionTimeout="20000" port="8080& ...
- 搭建fedora开发环境 common lisp, c++, go
第三方软件库: http://download1.rpmfusion.org/free/fedora/releases/25/Everything/x86_64/os/repoview/index.h ...
- java多线程处理
package com.copyFile; import java.io.BufferedReader;import java.io.File;import java.io.FileReader;im ...
- 《算法导论》 调用RANDOM(0,1),实现RANDOM(a,b)的过程
描述RANDOM(a,b)的过程的一种实现,它只调用RANDOM(0,1).作为a和b的函数,你的程序的期望运行时间是多少?(RANDOM(0,1)以等概率输出0或者1,RANDOM(a,b)以等概率 ...
- (分享)视频压缩Free Video Compressor 汉化版/中文版【全网唯一】
介绍:Free Video Compressor 是一个免费视频压缩软件,可以帮您有效的压缩视频.电影文件的体积大小,减小占用的磁盘空间,使之更容易放到手机中保存播放Free Video Compre ...
- Python + PIL 处理支付宝AR红包
思路比较简单:1.对图片进行锐化处理:2.设(r_h, g_h, b_h)为支付宝遮罩黑条的RGB值,以此为中心,查找半径为Diff_radius的范围内所有的色值: 3.对每一行符合步骤2的像素点个 ...
- OC的封装、继承与多态
面向对象有三大特征:封装.继承和多态. 一.封装 封装是将对象的状态信息隐藏在对象内部,不允许外部程序直接访问对象内部信息,而是通过该类所提供的方法来实现对内部信息的操作和访问.简而言之,信息隐藏,隐 ...
- linux(Debian) 中的cron计划任务配置方法
cron服务每分钟不仅要读一次/var/spool/cron内的所有文件,还需要读一次/etc/crontab,因此我们配置这个文件也能运用cron服务做一些事情.用crontab配置是针对某个用户的 ...
- 3o_AutoSSH
∮自动发送 ssh 公钥,为 ansible 鸣锣开道 Bold 参考资料 http://mageedu.blog.51cto.com/4265610/1412028 ...其实我并没有参考这篇博文的 ...