Grunt参考:

http://www.cnblogs.com/yexiaochai/p/3603389.html

http://blog.csdn.net/wangfupeng1988/article/details/46418203/

grunt打包seajs项目http://www.tuicool.com/articles/bEZNZnV

Grunt 实例之 构建 seajs 项目   http://www.tuicool.com/articles/zaUfI3

Gruntfile.js:

module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), //合并
concat: {
options: {
separator: '/*文件分割*/', //合并文件时的分隔符
banner: '/*合并文件 <%= grunt.template.today("yyyy-mm-dd") %>*/', //文件头注释信息,只会出现一次
footer: '/*concat end...*/', //文件尾信息,只会出现一次
stripBanners:"/**/" //去掉源代码注释信息(只会清除/**/这种注释)
},
//写法1:
basic_and_extras: {
files: {
'build/ecnulib.js': 'common/jslib/*.js',
'build/gLib.js': ['common/jslib/gClass.js', 'common/jslib/gConfig.js']
}
} //写法2
// dist: {
// src: 'common/jslib/*.js',
// dest: 'build/ecnulib.js'
// }
}, //压缩混淆
uglify: {
options: {
//注释
banner: '/*!ecnulib.js压缩后 <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
"my_target": {
//写法1
files: [{
expand: true,
cwd: 'common/jslib/',
src: '**/*.js',
dest: 'build'
}]
//写法2
// "files": {
// 'build/ecnulib.min.js': ['common/jslib/gClass.js', 'common/jslib/gConfig.js', 'common/jslib/gMap.js'],
// 'build/index.min.js':['js/index.js']
// }
}
//写法3
// build: {
// src: 'js/index.js',
// dest: 'build/index.min.js'
// }
}, //检查
jshint:{
options: { //相关配置
//jshintrc:'.jshintrc' //在.jshintrc文件里配置jshint的检查规则
//或者直接在options里面逐个配置
curly: true, //循环或者条件语句必须使用花括号包围
eqeqeq: true, //强制使用三等号
latedef: "nofunc", //禁止定义之前使用变量
strict:true //严格模式
},
//写法1
//all:["common/jslib/gConfig.js"] //写法2
// build:['common/jslib/gConfig.js'], //写法3
//合并之前做一次检查,合并之后再做一次检查
// 运行时用grunt jshint:pre jshint:after
pre: ['common/jslib/gClass.js', 'common/jslib/gConfig.js'],
after: ['build/gLib.js'] }, //css压缩
cssmin:{
compress:{
files:{
'build/css/style.min.css':['css/index.css','css/codewin.css']
}
} }, //复制文件
copy:{
main:{
flatten:true,
expand:true,
src:'build/*.js', //将src中的文件复制到dest路径下
dest:'common/' }
}, //require引入文件的打包
requirejs: {
compile: {
"options": {
"baseUrl": "./",
"name": 'src/test02.js',
"paths": {
"$": "src/zepto",
"_": "src/underscore",
"B": "src/backbone",
"Test": "src/Test01"
},
"include": [
"$",
"_",
"B",
"Test"
], //将include中包含的文件压缩打包至out中的路径下
"out": "dest/libs.js"
}
}
}, //监测文件变动
watch:{
build:{ //各个插件的配置时,都是用了“build”这一名称作为一个配置项,这个名词不是必须的,可以用其他字符串替换
files:['common/jslib/*.js','css/*.css'],
tasks:['cat','csmin'],
options:{
spawn:true, //默认true,会创建一个新的子进程来执行触发的任务;通过设置为 false,可以使得触发的任务可以共享进程上下文,并且提高速度。但是,这会导致监控任务容易崩溃,
event:['all'] //可以为 'all', 'changed', 'added' 和 'deleted'.
}
} } }); // 加载提供"uglify"任务的插件
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-watch');
//grunt.loadNpmTasks('grunt-contrib-requirejs'); // 默认任务
grunt.registerTask('ug', ['uglify']);
grunt.registerTask('cat', ['concat']);
grunt.registerTask('jsh',['jshint']);
grunt.registerTask('csmin',['cssmin']);
grunt.registerTask('cpy',['copy']);
grunt.registerTask('wat',['watch']); //自定义任务
//运行 grunt mytask:hello:world
grunt.registerTask('mytask',"this is a custom task",function (arg1,arg2){
grunt.log.writeln("任务名:"+this.name);
grunt.log.writeln("参数:"+arg1+" "+arg2);
}); }

package.json

/*批量安装插件
//在上传代码时,node_modules文件夹中的插件可以不上传,只保留package.json和Gruntfile.js,然后在改目录下,运行“npm install”,即可将所需的插件批量下载下来
//
//将package.json文件移至某目录下,执行“npm install”命令,即可批量下载*/ {
"name": "editor",
"file": "editor",
"version": "0.1.0",
"description": "this is a online editor",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-cssmin": "^1.0.1",
"grunt-contrib-jshint": "^1.0.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-contrib-watch": "^1.0.0"
}
}

Grunt参考的更多相关文章

  1. 前端自动化构建工具Grunt

    一.了解Gurnt(http://www.open-open.com/lib/view/open1433898272036.html) Grunt 是一个基于任务的JavaScript工程命令行构建工 ...

  2. AnguarJS测试的实施步骤整理

    最近开发用到了AngularJS,据说目前大型系统都用这个作为前端.最近参与的一个项目,web部分重度使用了AngularJS,整个前端架构有组织有纪律.所谓的有纪律就是说,有比较完善的测试用例,用上 ...

  3. 管理系统的前端解决方案:Pagurian V1.3发布

    Pagurian 一个管理系统的前端解决方案, 致力于让前端设计,开发,测试,发布更简单. 功能简介 Pagurian 适用于Web管理级的项目 基于Sea.js遵循CMD规范,友好的模块定义,使业务 ...

  4. 【开源.NET】 分享一个前后端分离的轻量级内容管理框架

    开发框架要考虑的面太多了:安全.稳定.性能.效率.扩展.整洁,还要经得起实践的考验,从零开发一个可用的框架,是很耗时费神的工作.网上很多开源的框架,为何还要自己开发?我是基于以下两点: 没找到合适的: ...

  5. npm的安装和使用?

    参考: http://www.cnblogs.com/chyingp/p/npm.html 在css中使用变量, 采用less或sass来编译css 改变网页网站开发和构建的方式, 除了用emmet( ...

  6. 初学seaJs模块化开发,利用grunt打包,减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  7. 快速开发Grunt插件----压缩js模板

    前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...

  8. 应用Grunt自动化地优化你的项目前端

    在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...

  9. Grunt学习使用

    原文地址:Grunt学习使用必看 grunt简介神马的不多说,到处一大堆. 我只说说我已经实现了的代码. 按照官方的教程 相信已经配置好了,接下来说 package.json 和 Gruntfile. ...

随机推荐

  1. 关于web前端代码艺术

    以前一直都以为html代码要分离得很好,html一个文件,css一个文件,js一个文件,然后最好一个html页面里面不要要太多冗余的代码,不要恶心地引入一个又一个的js,连jquery的引入我都觉得有 ...

  2. 一个综合实例讲解vue的基础知识点。

    本文通过一个简单的实例来讲解一下vue的基本知识点.通过这个综合实例的讲解,vue的基础知识就会掌握的差不多了. 首先看一下项目的效果:

  3. [js高手之路] html5 canvas动画教程 - 匀速运动

    匀速运动:指的是物体在一条直线上运动,并且物体在任何相等时间间隔内通过的位移都是相等的.其实就是匀速直线运动,它的特点是加速度为0,从定义可知,在任何相等的时间间隔内,速度大小和方向是相同的. < ...

  4. php追加编译GD库

    一.准备工作. 安裝 GD 前需要安裝 jpegsrc.v7.tar.gz, libpng-1.6.17.tar.gz, zlib-1.2.8.tar.gz, freetype-2.5.5.tar.g ...

  5. vim 环境设定(通用)

    有没有发现,如果我们以 vim 软件来搜寻一个档案内部的某个字符串时,这个字符串会被反白,而下次我们再次以 vim 编辑这个档案时,该搜寻的字符串反白情况还是存在呢!甚至于在编辑其他档案时,如果其他档 ...

  6. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  7. bootstrap 轮播模板

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. MVC中使用Echart后台加载数据 实现饼图、折线图、全国地图数据,单击双击事件等

    @{ Layout = null; } @if (false) { <script src="~/Js/jquery-easyui-1.5/jquery.min.js"> ...

  9. springboot kafka集成(实现producer和consumer)

    本文介绍如何在springboot项目中集成kafka收发message. 1.先解决依赖 springboot相关的依赖我们就不提了,和kafka相关的只依赖一个spring-kafka集成包 &l ...

  10. Echarts数据可视化series-graph关系图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...