[记录]gulp compass

因为个人习惯用compass,所以gulp中,还是用compass进行编译scss文件。

1. 使用npm安装gulp-compass

1 npm install gulp-compass --save-dev

因为我之前已经用了compass created了一个项目,用 config.rb 文件,所以使用 gulp-compass 的 Load config from config.rb

 1 var compass = require(‘gulp-compass‘);
 2 // 编译Sass
 3 gulp.task(‘compass‘, function() {
 4     gulp.src(‘./css/training/sass/*.scss‘) //sass的路径
 5         .pipe(compass({
 6           config_file: ‘./css/training/config.rb‘, //config.rb的路径
 7           css: ‘./css/‘, //生成css的目录
 8           sass: ‘./css/training/sass/‘ //sass的目录
 9         }))
10         .pipe(gulp.dest(‘../‘));
11 });

目录结构:

运行结果:

gulp的根目录是 training这个文件夹,css的结构如上图所示。gulp package.json目前还不了解。

时间: 2024-11-03 03:33:07

[记录]gulp compass的相关文章

gulp 粗粗学习 记录下

看视频学习 粗粗记录下 以便以后学习 1.初记录 gulp.task //定义一个任务 gulp.src //锁定到做task任务的文件路径 gulp.dest //锁定到任务做完后文件去向的路径 gulp.watch //监控的一个任务 可以看做一个人任务 pipe:任务流的函数 2.常用的方法记录 需要把gulp 放在gulpfile.js // 定义一个任务 任务名:message 执行任务:gulp message gulp.task('message', function(){ ret

Gulp 学习总结

Gulp 自动化工具开发非常方便,便于上手,值得使用. 一.Gulp安装 gulp是基于NodeJS运行的,所以需要想安装NodeJS.  http://nodejs.org/download/ 安装gulp # 安装全局环境 npm install gulp -g #安装本地环境 npm install gulp --save-dev 二.Gulp插件安装 npm install browser-sync gulp-compass gulp-sass gulp-rename gulp-jshi

python 完整项目开发流程

#    1. 安装 python#    2. 安装virtualenvwrapper#    3. 虚拟环境相关操作#    4. 进入虚拟环境, 安装django#    5. 安装编辑器#    6. 安装mysql#    7. 安装pymysql #    前端开发#        1.前端开发所需环境            nvm安装                下载安装                添加环境变量            node安装              

gulp记录

凹嗷嗷,之前的记录啊,眼泪汪遍大江南北. 虽然下载gulp插件时,我煮了饭,扫了地,睡得昏天地暗后插件还没下载完泪奔了两下,gulp还是拯救我的小精灵. 参考资料 1.http://www.cnblogs.com/starof/p/5194622.html 2.http://www.cnblogs.com/givebest/p/4707432.html(以下两张大图来自这个大神的博客截图) var gulp = require('gulp'), runSequence = require('ru

gulp初体验记录

目前用的业界比较知名的三个前端构建工具:grunt.gulp.fis,自己此前一直都是只在用grunt,fis看过一点,gulp则一直都没注意过,直到最近发现好像用的人越来越多,所以今天也就抽了点时间尝试了一下. [什么是gulp] 比较官方的一句话就是:gulp是一种基于流的,代码优于配置的新一代构建工具. 可以说,gulp和grunt有点类似,但是从书写角度上来说,写grunt的gruntfile就是在写一个配置文件,相对繁琐且起初语义不是很清晰,而写gulp的gulpfile就相当于在写代

gulp监听文件变化,并拷贝到指定目录(转)---参考记录

###暂时不支持目录修改.创建.删除.var gulp = require('gulp'); var fs = require('fs'); var path = require('path'); var less = require('gulp-less'); var sass = require('gulp-sass'); var minifycss = require('gulp-minify-css'); var concat = require('gulp-concat'); var

gulp使用学习记录

gulp是一个nodejs的streaming构建工具,所谓的streaming大致意思就是把构建流程想成一个个链接的管道(pipe). 1.什么是src和pipe?如下使用到了src 与 pipe gulp.src('spec/google.spec.js')        .pipe(jasmine()); 我们先看一个unix命令: cat gulpfile.js | wc -l 这是两个独立的命令,cat gulpfile.js用来获取gulpfile.js的文件内容,wc -l用来统计

gulp自动添加版本号过程中的一些要点记录

1.打开node_modules\gulp-rev\index.js 第144行 manifest[originalFile] = revisionedFile; 更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash; 2.打开node_modules\gulp-rev\nodemodules\rev-path\index.js 10行 return filename + '-' + hash + ext; 更新为:

记录下自己写的gulp打包脚本

var c = { rootPath: 'src',//项目文件夹 outputPath: 'output',//文件编译后的输出目录 revPath: 'manifest',//rev映射文件目录 appjs: 'app.js',// run JS homePage: 'index.html', cssFolderPaths: ['css'],//需要压缩的CSS目录 jsFolderPaths: ['model'],//需要压缩的JS目录 ngjsFolderPaths: ['app', '