compass和sass文章列表:http://182.92.240.72/tag/compass/

compass实战grunt:

http://wrox.cn/article/2000491/

http://ju.outofmemory.cn/entry/73492

http://ju.outofmemory.cn/entry/75413

compass-demo/Gruntfile.js: https://github.com/minghe/compass-demo/blob/master/Gruntfile.js#L38

module.exports = function (grunt) {

    grunt.initConfig({
// 指定打包目录
buildBase: 'build',
//源码目录
srcBase: 'src', clean: {
build: [
'<%=buildBase %>'
]
},
copy: {
all: {
files: [
{
expand: true,
cwd: '<%= srcBase %>',
src: ['**/*.css'],
dest: '<%=buildBase %>'
}
]
} },
compass: {
dist: {
options: {
sassDir: '<%= srcBase %>',
specify: '<%= srcBase %>/index.sass',
cssDir : '<%= srcBase %>',
assetCacheBuster: false
}
},
sprite: {
options: {
sassDir: '<%= srcBase %>',
specify: '<%= srcBase %>/sprite.sass',
cssDir : '<%= srcBase %>',
imagesDir: "<%= srcBase %>/images",
httpPath:"http://www.36ria.com/css",
assetCacheBuster: false
}
},
spriteX2: {
options: {
sassDir: '<%= srcBase %>',
specify: '<%= srcBase %>/sprite-x2.sass',
cssDir : '<%= srcBase %>',
imagesDir: "<%= srcBase %>/images",
assetCacheBuster: false
}
}
},
cssmin: {
build: {
expand: true,
cwd: '<%=buildBase %>',
src: ['**/*.css', '!**/*-min.css'],
dest: '<%=buildBase %>',
ext: '-min.css'
}
},
watch: {
options: {
livereload: true
},
compass: {
files: ['<%= srcBase %>/**/*.sass'],
tasks: ['compass']
}
}
});
/**
* 载入使用到的通过NPM安装的模块
*/
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass'); grunt.registerTask('default', ['clean','compass','copy:all','cssmin:build']);
grunt.registerTask('dev', ['watch']);
grunt.registerTask('sprite', ['compass:spriteX2']); };

  

grunt + compass的更多相关文章

  1. grunt + compass retina sprites

    https://github.com/AdamBrodzinski/Retina-Sprites-for-Compass

  2. [工具]前端自动化工具grunt+bower+yoman

    安装过程 安装nodejs 安装grunt,bower,yoeman 命令:(-g 表示全局安装,否则安装到当前目录下) npm install -g grunt-cli npm install -g ...

  3. eclipse tomcat maven

    jdk jre eclipse 略过 下载maven和tomcat 上apache官网下载maven:http://maven.apache.org/download.cgi. 上apache官网下载 ...

  4. Sass和compass 安装 和配合grunt实时显示 [Sass和compass学习笔记]

    demo 下载http://vdisk.weibo.com/s/DOlfkrAWjkF/1401192855 为什么要学习Sass和compass ?提高站独立和代码产品化的绝密武器,尤其是程序化cs ...

  5. sass&compass&grunt

    1. compass compile path/to/project//编译scss compass watch path/to/project//自动监视文件变化 2.mixin @include ...

  6. (绝对官方好用,快速上手)针对grunt之前写的那篇有些乱,这次总结个清晰的

    安装 Grunt基于Node.js,安装之前要先安装Node.js,然后运行下面的命令. sudo npm install grunt-cli -g grunt-cli表示安装的是grunt的命令行界 ...

  7. grunt 入门学习

    前端工作流,Grunt上手指南 Posted@2013-04-20 7:15 a.m. CategoriesGrunt ,  javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Lo ...

  8. 如何使用grunt工具

    本文来源于同事的笔记,也是在网上查找的资料,记录分析的特别详细,对初学者来说简直不能再通俗易懂了,感谢原作者! 1.前言 选择Grunt原因 管理我们的文件依赖 随心所欲的批处理任务 整合常用的前端工 ...

  9. 【转载】Grunt常用插件介绍

    项目名称 grunt-contrib v0.8.0 项目地址 https://github.com/gruntjs/grunt-contrib 项目介绍 此项目是对grunt常用插件的集合,刚接触gr ...

随机推荐

  1. 【CocoaPods】配置CocoaPods前 - 本地安装好Ruby环境

    xcode (反正就是代码编辑器) Xcode就不用说了把. homebrew (反正就是软件管理器) homebrew是一个包管理器,用于在mac上安装一些os x上没有的UNiX工具(比如wget ...

  2. python3 学习总结与建议

    最近我又玩起了python,以前听说过它,只是那时候我看见官方的一句名言:“用python语言编程,只用一种最好的方式去实现就可以了”,我就对它提不起兴趣了.原因是我是一个喜欢自由的人,不喜欢做事情只 ...

  3. LintCode-Unique Path II

    Follow up for "Unique Paths": Now consider if some obstacles are added to the grids. How m ...

  4. HTML & XML 转义字符

    HTML & XML 转义字符 HTML中<, >,&等有特殊含义,(前两个字符用于链接签,&用于转义),不能直接使用.使用这三个字符时,应使用它们的转义序列,如下 ...

  5. android开发 socket接收图片并保存

    逻辑:接收到socket之后需要将socket发送的图片数据保存下来并通知handler更新界面 关键代码: public void readImage(Socket socket) { try { ...

  6. 生成最小树prim算法

    最小生成树prim算法实现   ‘      ’最小生成树,就是权值(两点间直线的值)之和的最小值. 首先,要用二维数组记录点和权值.如上图所示无向图: int G[6][6];       G[1] ...

  7. The 2014 ACM-ICPC Asia Mudanjiang Regional First Round

    The Himalayas http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5341 签到 #include<cstdio& ...

  8. 2012 Asia Hangzhou Regional Contest

    Friend Chains http://acm.hdu.edu.cn/showproblem.php?pid=4460 图的最远两点距离,任意选个点bfs,如果有不能到的点直接-1.然后对于所有距离 ...

  9. display:none和visibility: hidden二三事

    display:none属性后,HTML元素(对象)的宽度.高度等各种属性值都将“丢失”;而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占 ...

  10. 关于JS及应用程序开发的一些体会

    代码通常从 一,生命周期 二,业务流程 这几方面来看. JS Client可以和Server端分离. JS端的生命周期. Server端就是 JS能处理的只是HTTP协议.