我的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放在根目录 ...
随机推荐
- web前端js过滤敏感词
web前端js过滤敏感词 这里是用文本输入框还有文本域绑定了失去焦点事件,然后再遍历敏感词数组进行匹配和替换. var keywords=["阿扁","呵呵", ...
- manacher(无讲解)
BZOJ3325: [Scoi2013]密码 https://lydsy.com/JudgeOnline/problem.php?id=3325 分析: 根据前i个字符和一些不等和相等条件就可以确定每 ...
- 深入浅出Javascript的正则表达式
深入浅出的javascript的正则表达式学习教程 阅读目录 了解正则表达式的方法 了解正则中的普通字符 了解正则中的方括号[]的含义 理解javascript中的元字符 RegExp特殊字符中的需要 ...
- hadoop之一:概念和整体架构
什么是hadoop? Apache Hadoop是一款支持数据密集型分布式应用并以Apache 2.0许可协议发布的开源软件框架.它支持在商品硬件构建的大型集群上运行的应用程序.Hadoop是根据Go ...
- python 抓取美丽说店铺的宝贝图片及详细信息的实现(爬虫)
对于页面的抓取,我们使用的是requests,现在大部分的网站都支持动态加载,我们在firefox f12后查找动态的url :http://www.meilishuo.com/aj/shop_lis ...
- grep的用法(CentOS7)及有关正则表达式的使用
环境准备:alias grep="grep --color" 1.grep以整行为单位进行处理,行中有的匹配显示出来 Last中取出符合root的行:grep '查找字符串' l ...
- oracle 日期问题 网上找到自己查阅时方便
第一部分:oracle sql日期比较: oracle sql日期比较:在今天之前: select*from up_date whereupdate< to_date('2007-09-07 0 ...
- SeetaFace教程(一) 在 VS 中的编译安装和环境配置
SeetaFace开源库由FaceDetection.FaceAlignment.FaceIdentification三部分组成.FaceDetection是在一副图片中检测出人脸区域,以一个方形区域 ...
- F - 棋盘问题
F - 棋盘问题 Time Limit:1000MS Memory Limit:10000KB 64bit IO Format:%I64d & %I64u Submit Sta ...
- IE各栏的截图说明
工具栏 包括 状态栏 命令栏 菜单栏 收藏栏 IE工具 > 工具栏 > 状态栏 有状态栏显示 无状态栏显示 菜单栏 快捷键 alt 可以快速展示 菜单栏 ,查看 ...