gulp sass

gulp，使用的是Node.js中stream也就是流的概念，首先获取需要的stream，然后通过stream的pipe()的方法把流导入到你想要的地方，比如说gulp的插件中，经过插件处理后的流又可以继续导入到其他的插件中，当然也是可以把流写入到文件中，所以我们使用的gulp是以stream为媒介的，他不需要频繁的生成临时文件

.pipe管道

gulp.src指定需要处理的源文件的路径，gulp借鉴lunix系统的管道pipe思想，前一级的输出 后一级的输入

gulp.watch监听文件的变化，文件修改，会执行指定的文件

gulp.dest指定的处理完后文件输出的路径

gulp.task定义了一个gulp任务

1. npm install gulp -g 安装
2. 创建一个文件夹 从命令行进入文件夹 或者是进入你写的项目的文件里
3. npm install gulp 作为项目的开发依赖安装
4. gulp -v 查询版本号
5. npm init 运行
6. 下面会出现name 
7. 回车键
8. 在目录中点击工具 右键属性隐藏 win10在设置里面搜文件夹 更改文件和文件夹的搜索选项
9. gulp 回车
10. 新建gulpfile,js
11. gulp 回车    
12. 在gulpfile.js中模块化引入

   let gulp  = require ("gulp");引入

   gulp.task("指令名字" function(){

      })

    13.创建gulp.task("index",()=>{

        return gulp.src("index.html").pipe(gulp.dest("dist"))；

    })

    14.在cmd 中 gulp index

    15.然后在根文件目录看到dist文件夹

    16.创建多个文件夹和文件，将文件复制到dist

    在gulp 下创建hello 文件夹 多个文件 world 文件夹 多个文件

    将world hello 文件复制到dist中 即-->

        gulp.task("index",()=>{

        return gulp.src (  ["hello/hello.html","world/world.html"] ).pipe ( gulp.dest("dist") );

        })

     17.(侦测文件变化自动执行任务 在本地修改文件，自动同步到服务器文件)

        gulp.task("watch",function( ){ 

            gulp.watch("index.html",["index"])；

                        监视index.html   如果改变执行index文件

            }) 

        18.输入 gulp watch 监听状态

        19.输入 npm install gulp-connect

        20.let connect  = require ( "gulp-connect")；

        21.gulp.task("server",()=>{

            connect.server({

            root:"dist";

            port:8888；

            livereload : true

            })

            })

            gulp.task('default',['server','watch'])；

        在本地修改文件，自动同步到服务器文件，并且浏览器自动刷新

 

        安装sass 

        1. npm install gulp-sass-china

        2. 引入

        let sass = require("gulp-sass-china")

        3.  在watch下添加 

        gulp.watch("sass/ *.sass"，["sass"])

        4.创建sass文件夹下创建，右键->新建->其他->Hbuilder->sass.file

gulp.task( "sass",( )=>{                                    .

    return gulp.src("sass/*.sass")                       .

    .pipe(sass().on("error",sass.logError))          .

    .pipe(gulp.dest("css"))                                 .

    .pipe(connect.reload())                                .

})                                                                      .

.........................................................................................

      5.在cmd 中输入gulp （既打开服务器又监听）

在sass中输入样式  p { background:"red"};浏览器的内容被同步渲染

变量必须以$开头

例：$font-size:16px;

    div { font-size:$font-size; }

    操作连接符&：hover{ color:red;}

嵌套，选择器嵌套 表层级 属性嵌套

ul{
  li{
   list-style:none;
   color:nth($linkcolor,1);
}
}