我的grunt配置
module.exports = function(grunt) {
// 配置.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
css: {
files: 'static/introduce/scss/**/*.scss',
tasks: ['clean:css','compass'],
options: {
livereload: true
}
} ,
includereplace:{
files:'src/html/**/*.html',
tasks:['includereplace','copy:html','clean:html']
}
},
jshint:{//js代码检测工具
options: {
jshintrc: '.jshintrc'
},
src: ["src/static/introduce/js/app/**/*.js"]
},
includereplace: {//包含html片段
nav: {
files: [
{src: 'src/html/**/*.html', dest: '.tmphtml/'}
]
}
},
uglify: {//js压缩
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
js: {
files: [{
expand: true,
cwd: 'static/introduce/js',
src: '**/*.js',
dest: 'static/introduce/js',
ext:".min.js"
}]
}
},
compass: {//compass
dev: {
options: {
sassDir: 'static/introduce/scss',
cssDir: 'static/introduce/css',
outputStyle:'compressed',
noLineComments: true
}
}
},
clean: {//清除
mod:["static/introduce/css/module"],
css:["static/introduce/css"],
html:[".tmphtml/"]
},
copy: {//复制
css: {
expand: true,
cwd: 'static/introduce/css/',
src: '**',
dest: '../../src/SVipSys/SVipSys.Web/static/Introduce/css',
flatten: true,
filter: 'isFile'
},
scss:{
expand: true,
cwd: 'static/introduce/scss/',
src: '**',
dest: '../../src/SVipSys/SVipSys.Web/static/Introduce/scss'
},
html:{
expand: true,
cwd: '.tmphtml/src/html/',
src: '**',
dest: 'view/'
}
},
imagemin:{//图片压缩
dynamic: {
files: [{
expand: true,
cwd: 'static/',
src: ['**/*.{png,jpg,gif}'],
dest: 'static/'
}]
}
}
});
// 加载任务
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-include-replace');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-imagemin');
// 任务列表
grunt.registerTask('default',['clean:css','compass','clean:mod',,'watch']);
grunt.registerTask('tpl',['includereplace','copy:html','clean:html']);
};
写在后面的话,最初听到grunt这个词的时候,是在去年上半年,当时前端构建工具非常火,我一直觉得它是一个非常高大上的东西,后来发现真的只是个工具而已。大神们说,你们不应该被工具所累,因为工具是学不完的。是的,我们不需要跟风,但不代表不必要用。很多是项目需求,比如你在入职后接手了一些新的项目,那么,最好就是学习它,掌握它。使用grunt的时候,确实感到了方便之处,比如图片压缩、js压缩、代码检测。。。工具,它是帮我们干活,减少重复、无聊的工作量的。所以,使用它的时候,我们应该明确的知道,希望它能帮我们干什么活,而不是对着API写一堆配置都不知道在干嘛。。。
我的grunt配置的更多相关文章
- grunt配置任务
这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...
- Nodejs+Grunt配置SASS项目自动编译
Nodejs+Grunt配置SASS项目自动编译 早前听说Nodejs和Grunt很强大,特别是用来构建自动化的前端开发,更是强大无比.但一直碍于自己掌握的技术有限,不敢深入,也未曾深入下去.最近在开 ...
- grunt配置详情
这个grunt配置 是我的一个程序员朋友从网上无意间看到的,然后他亲测了下,恩,是可以的.不过我到目前还未测试过是否可以. 一.安装node, 首先确保电脑已有node的环境.然后 运行 npm i ...
- grunt配置太复杂?发布一个前端构建工具,简单高效,自动跳过未更新的文件
做前端项目,如果没有一个自动化构建工具,手动处理那简直就是坑爹O(∩_∩)O.于是上网了解了下,grunt用的人不少,功能也挺强大.看了一下grunt的配置(包括gulp),感觉稍显复杂.当时项目结构 ...
- grunt配置太复杂?使用Qbuild进行文件合并、压缩、格式化等处理
上次简单介绍了下Qbuild的特点和配置,其实实现一个自动化工具并不复杂,往简单里说,无非就是筛选文件和处理文件.但Qbuild的源码也并不少,还是做了不少工作的. 1. 引入了插件机制.在Qbuil ...
- grunt配置sass项目自动编译
1.安装Ruby和SASS 首先我们需要在电脑上安装Ruby和SASS.如果您使用的是Mac,您就没必要安装Ruby.如果您使用的是Window系统,你需要安装Ruby. 2.安装Nodejs 由于使 ...
- 配置grunt进行css、js的检查、合并和压缩
现在会进行代码的合并和压缩已成为前端人员的必备知识,那么现在来介绍一个grunt的工具.grunt是个风靡世界的工具,它的首页是 http://www.gruntjs.net 这是个中文网站,有文档 ...
- grunt安装、配置、在webstrom中使用
1.全局范围安装 Grunt命令行(CLI) npm install -g grunt-cli Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt.这样带来的好处是,允许 ...
- grunt项目配置
安装完CLI,还要在项目安装Grunt npm install -g grunt-cli npm install grunt --save-dev 源码放在src下 package.json放在根目录 ...
随机推荐
- jquery操作全选、批量删除、加减行
--------------------------------------------------------------------------------------- html静态页面 --- ...
- 集训Day5
生活还得继续 bzoj3771 题面让我笑了很长时间 给出 n个物品,价值为别为Xi且各不相同,现在可以取1个.2个或3个,问每种价值和有几种情况? *顺序不同算一种 很傻逼的一个母函数+容斥,用A( ...
- java面试题04
1.就你所熟悉的银行业务面说一下,越详细越好 银行经验:手机银行 网上银行经验 怎么支付 转账 了解基本业务 2.了解工作流的控制,审批流程以及帐务处理么? java中怎么实现工作流.审批流程 ...
- 自动拆装箱(int,Integer)
包装类型Java语言是一个面向对象的语言,但是Java中的基本数据类型却是不面向对象的,这在实际使用时存在很多的不便,为了解决这个不足,在设计类时为每个基本数据类型设计了一个对应的类进行代表,这样八个 ...
- 四 MySQL数据库表设计
一: 设计表: user: ID, PWD, name, type archiveRecord: referdate, archiveNum, owner, user, ...
- Session与Cookie(1)
Session session是一种位于服务端,用于存储一个会话(指打开浏览器访问某个域名,及其下面的资源,然后关掉浏览器的过程)中所需的配置信息.也就是在一个会话中,只存在一个session.对于J ...
- nginx中有关命令和日志切割,配置文件加载的详细阐述
一.Nginx简介 Nginx (“engine x”) 是俄罗斯人Igor Sysoev(塞索耶夫)编写的一款高性能的 HTTP 和反向代理服务器.Nginx 已经在俄罗斯最大的门户网站── Ram ...
- /dev/mapper/vg_zjxtest-lv_root 占用到达100%的解决方法
linux系统下报这个错误是磁盘满了,可以先做以下几个检查: 1.查看下面这个目录看看是否是回收站满了 du -sh ~/.local/share/Trash 2.查看/tmp目录和/var目录是否有 ...
- Spring入门第十课
Spring表达式语言:SpEL Spring表达式语言(简称SpEL)是一个支持运行时查询和操作对象图的强大的表达式语言. 语法类似于EL:SpEL使用#{...}作为定界符,所有在大括号中的字符都 ...
- Microsoft EBooks
Go pick up what you are interested J http://blogs.msdn.com/b/mssmallbiz/archive/2014/07/07/largest-c ...