gulp的配置

学习笔记整理、总结

一、 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

4. 执行npm init 创建package.json文件：这个文件保存着你目录下的项目模块的相关信息。可以把它想象成你所用到模块儿的一个目录.
5. 本地安装gulp：终端使用命令(npm install gulp --save-dev)
6. 在工程目录下创建gulpfile.js文件 ，并在gulpfile.js中引入gulp模块：

var gulp = require("gulp");
gulp.task('test',function(){
    console.log('gulp启动成功');//测试gulp是否启动
})

7. 然后终端执行gulp+任务名：即gulp test,当看到“gulp启动成功”，表示可以正常使用gulp了。
8. 之后还需要引入各个压缩的库：
   比如使用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新手入门教程