学习笔记整理、总结
一、 sass、ruby、compass之间的关系和作用
- sass是css预处理器，是基于ruby语言的，所以安装sass之前要安装ruby；
- compass是sass的工具库，补充了sass的一些功能，sass和compass之间的关系就像JavaScript和jQuery的关系。
- sass:
（1） sass是一种css扩展语言解析器，是基于Ruby语言开发而成，因此安装sass前需要安装Ruby.
（2）sass的服务器在国外，一般安装比较慢，建议切换到国内源。-
nrm -ls切换源
-nrm use taobao
-
注意：nrm(npm registry manager )是npm的镜像源管理工具，有时候国外资源太慢，那么我们可以用这个来切换镜像源。
（3）npm install node-sass -g安装到全局里
二、什么是gulp?为何使用gulp?
三、gulp的配置步骤：（注意gulp需要安装两次：全局安装、本地安装）
1.安装nodejs：gulp是基于node的自动化构建工具，所以先安装node.js
2.全局安装gulp：终端使用命令(npm install gulp -g)
3.创建一个工程目录并进入：例如mkdir myproject
- 执行npm init 创建package.json文件：这个文件保存着你目录下的项目模块的相关信息。可以把它想象成你所用到模块儿的一个目录.
-
本地安装gulp：终端使用命令(
npm install gulp --save-dev) - 在工程目录下创建gulpfile.js文件 ，并在gulpfile.js中引入gulp模块：
var gulp = require("gulp");
gulp.task('test',function(){
console.log('gulp启动成功');//测试gulp是否启动
})
- 然后终端执行gulp+任务名：即gulp test,当看到“gulp启动成功”，表示可以正常使用gulp了。
- 之后还需要引入各个压缩的库：
比如使用sass库：
(工程目录下创建一个app文件夹 ，app里面创建一个 scss和css文件夹，scss文件夹下创建 styles.scss文件,文件目录如下)：
image.png
- a) 安装
gulp-sass:npm install gulp-sass --save-dev - b) gulpfile.js文件中，引入gulp-sass库，书写一个任务使用sass方法：
var sass=require("gulp-sass");
gulp.task('sass',function(){
return gulp.src('app/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'));
})
注意：src和dest是gulp的两个方法，一进一出
- c) 测试:在styles.scss中写入：
.testing{
width: 19%;
}
- d) 最后执行
gulp sass：你会发现在app/css自动生成一个styles.css文件，里面写有代码：
.testing{
width: 19%;
}
注意：当我们改动app/sass/styles.scss文件时，重新gulp sass,会发现app/css/styles.css文件也是会发生相应的变化。
出现问题：但是如果每次修改styles.scss文件我们都要重新gulp sass！所以我们需要监听styles.scss的变化，下次修改的话就不需要重新gulp scss了。
- e) 如何监听？
编辑gulpfile.js文件，下次修改styles.scss时候，就不需要重新gulp sass了。监听的作用：监听文件的变化，修改的时候自动更新到.css文件。
gulp.task('watch', ['sass'],function () {
gulp.watch('app/scss/*.scss', ['sass']);
<!-- gulp.watch(devPath.js + '**/*.js', ['jsmin']);
gulp.watch(devPath.images + '**/*', ['imagemin']);
gulp.watch(devPath.pic + '**/*', ['picmin']); -->
});
最后在终端使用gulp watch就可以执行监听任务啦~（一定不要忘记！！！！！！！！！！！）
注意：sass是你需要监听的任务名称，app/scss/*.scss是监听文件的一个路径。
附资料：gulp新手入门教程
网友评论