gulp 简单命令------sass文件编译css ----安装以及使用

gulp是基于nodejs的自动任务运行器  他能自动的完成 javascript/coffee/sass/less/html/image/css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成、并监听文件改动后重复指定的步骤。借用了Unix的pipe思想,前一级的输出变成后一级的输入。可以提高开发效率。

列表是我的简易微信小程序的菜单目录

新建文件   gulpfile   

npm install gulp -g

安装好后 新建项目   npm  init

安装 sass  

要是觉得麻烦 直接复制我的 package.json

cnpm i  一键搞定  

{
  "name": "weixinlittle",
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "node-sass": "^4.7.2"
  },
  "description": ""
}

安装后  开始在gulpfile   里面书写代码

还是觉得我的彩色编译器好看  csdn原本的编译器太丑了

const gulp = require ( "gulp" ); //gulp

const sass = require ( "gulp-sass" ); //sass

const rename = require ( "gulp-rename" ); // 文件更名

//创建任务

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

console . log ( "day day up" );

})

//合并文件 压缩文件 复制

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

gulp . src ( "./images/**/*.png" ) //源文件

. pipe ( gulp . dest ( "./img" )) // 输送目标文件

})

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

gulp . src ([ "./**/*.scss" , "!node_modules/**/*" ]) //除去node_modules 外的所有以scss结尾的文件 都将执行这个命令

. pipe ( sass (). on ( "error" , sass . logError )) //报错不会终止程序

. pipe ( rename ( function ( path ){ //把xscc文件的后缀换成 scss

path . extname = ".wxss" ;

}))

. pipe ( gulp . dest ( "./" )) //找到根文件

})

//配置监听后 保存后自动讲scss文件编译成css文件

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

gulp . watch ( "./pages/**/*.scss" ,[ "sass" ]), //监听page里的sass文件

gulp . watch ( "./*.scss" , [ "sass" ]); //监听同级的以scss结尾的文件 执行sass这个命令

})

gulp . task ( "default" , [ "hello" , "img" ], function () {

console . log ( "done" )

})

执行命令 就更简单了  gulp  name

------name就是你在task后面写的 string  名字

例如 

编译scss文件     gulp sass

监听sass命令 gulp watch