gulp常用插件使用方法
在本地創建一個gulpfile.js的文件，專門gulp去編寫任務的gulpfile.js 中編寫任務 需要在控制檯通過
gulp 任務名（ 運行你編寫好的任務）
注意一個雷區：gulp4.0後的版本和node.js不太兼容，所以推薦大家使用gulp3.9.1 然後使用vnm下載多個版本的node js 進行版本切換
例：require.js中編寫下面的函數 然後在CMD中 進入文件路徑後
gulp hello 即可運行
const gulp = require("gulp");
//編寫第一個任務
/*
第一個參數：任務的名字自定義
第二個參數：回調函數，任務執行的功能
*/
gulp.task("hello",function(){
console.log("hello world");
})
.給gulp添加插件，插件的詳細用法
見官網： https://gulpjs.com/plugins/
使用第三方插件的步驟：
commonJS規範
1.先去下載插件到本地
cnpm install 插件名字 --save-dev
或者
cnpm i 插件名字 -D
2.通過require（）引入文件
3.查詢插件的用法
注意：
開發版本:index.css
上線版本：index.min.css
重點： jQuery編寫的代碼大家不要合併和壓縮
記住：給別人代碼的時候，node_modesls 刪除掉
拿到這個這個項目後，進入目錄，重新下載所有的依賴的插件在package.json中有記錄 直接運行cnpm install 即可重新下載所有的插件
常用插件及使用方法
/*
gulp.src() 找到源文件路徑
gulp.dest() 找到目的文件的路徑，{注}：如果設置這個目的文件路徑不存在，會自動創建
pip() 程序運行管道
1.複製.html文件
gulp.task("copy-html",function(){
return gulp.src("index.html").pipe(gulp.dest("dist/"))
.pipe(connect.reload());//實時刷新;
})
2.靜態文件，拷貝圖片
gulp.task("images",function(){
// return gulp.src("img/*.png").pipe(gulp.dest("dist/iages"));拷貝.png
// return gulp.src("img/*.{png,ipg}").pipe(gulp.dest("dist/iages"));.png .jpg 全部拷貝
// return gulp.src("img/*/*").pipe(gulp.dest("dist/iages"));//只拷貝了文件裏面的文件內容
return gulp.src("img/**/*").pipe(gulp.dest("dist/iages"))
.pipe(connect.reload());//實時刷新;
})
3.拷貝多個文件到一個目錄
gulp.task("data",function(){
return gulp.src(["json/*.json","xml/*.xml","!xml/4.xml"]).pipe(gulp.dest("dist/data"));
})
4.一次性執行多個任務的操作 注意：4.0以後新增語法 多任務必須用gulp.series將右邊的兩個函數括起來
gulp.task("build",["copy-html","images","data"],function(){
console.log("任務執行完畢");
})
5.監聽，如果監聽到文件有改變，會自動去執行對應的任務。更新數據
gulp.task("watch",function(){
/*
第一個參數，是文件監聽的路徑
第二個參數。我們要去執行的任務
*/
gulp.watch("index.html",["copy-html"]);
gulp.watch("img/**/*",["images"]);
gulp.watch(["json/*.json","xml/*.xml","!xml/4.xml"],["data"]);
})
6. scss 轉成 css樣式
//引入文件 scss 轉成 css樣式
const sass = require("gulp-sass");
//壓縮css gulp-minify-css 插件
const minifyCSS = require("gulp-minify-css");
//重命名插件 gulp-rename
const rename = require("gulp-rename");
```javascript
7.壓縮文件gulp-minify-css一般情況下壓縮文件和重命名文件兩個一起使用 將壓縮的文件進行重命名後再傳輸**
gulp.task("sass",function(){
return gulp.src("stylesheet/index.scss")
.pipe(sass())//調用sass函數編譯
.pipe(gulp.dest("dist/css"))//保存一份未壓縮版本
.pipe(minifyCSS())//壓縮文件
.pipe(rename("index.min.css"))//重命名
.pipe(gulp.dest("dist/css"))
.pipe(connect.reload());//實時刷新;//保存壓縮版
})
8.gulp-concat 合併文件
9.gulp-uglify 壓縮js文件
*/
const concat = require("gulp-concat");//gulp-concat 合併文件
const uglify = require("gulp-uglify");//gulp-uglify 壓縮js文件
gulp.task("scripts",function(){
return gulp.src("JavaScript/*.js")
.pipe(concat("index.js"))//合併成index.js文件
.pipe(gulp.dest("dist/js"))
.pipe(uglify())//壓縮文件
.pipe(rename("index.min.js"))//重命名壓縮文件
.pipe(gulp.dest("dist/js"))//保存壓縮文件
.pipe(connect.reload());//實時刷新
})
10.服務器處理
gulp-connect 啓動一個服務器
*/
const connect = require("gulp-connect");
gulp.task("server",function(){
connect.server({
root:"dist",//設置根目錄
port:8888,//設置端口號
livereload:true //啓動實時刷新 1. 啓動監聽 2.給每個需要刷新的任務添加.pipe(connect.reload());//實時刷新
})
})
//同時啓動監聽和服務 default 默認任務 我們可以直接在控制檯通過 gulp命令啓動
gulp.task("default",["watch","server"]);
require.js模塊化開發
模塊化開發的規範：
CommonJS規範(服務器規範)，編寫代碼
聲明：
module.exports = {
outa : showA,
outb : showB
}
引用：
var moduleA = require("moduleA.js");
moduleA.outa();
modulea.outb();
AMD規範(客戶端、瀏覽器)（常用）
聲明：
define(function(){
//代碼
return{
outA:showA,
outB：showB
}
})
引入：(異步執行)
require("moduleA.js",function(){
//這裏的代碼，模塊引入之後執行
moduleA.outA();
moduleA.outB();
})
alert("hello world");
小彩蛋 CMD規範
ECMA6(模塊化規範)
export = {
outA:showA
outB:showB
}
異步的
import moduleA from "moduleA.js "
moduleA.outA();
moduleA.outB();
在使用模塊化開發的時候，我們需要先引用require.js官方的文件對我們的項目進行模塊化管理，大家首先需要去下載這個文檔，然後把文檔放在我們的項目文件中
在html文件中引入一個script
<script src="js/require.js" async='true' defer data-main="js/xxx"></script>
模塊化開發的作用域：管理當前頁面上引入的所有.js文件
async='true' 異步加載 IE下不兼容
IE下爲 ： defer
data-mian = "" 設置入口文件
注：每一個.html文件都要有一個入口文件，管理當前.html頁面使用所有的js代碼
注：後續引入的所有.js 後續都可以省略
主要管理文件 data-main
console.log("加載成功");
/*
引入模塊add.js模塊,遵從AMD規範
第一個參數，必須是數組 因爲模塊不只有一個
/*
如果不想寫路徑的話 可以配置好路徑
*/
require.config({ //配置路徑
paths:{
//自定義模塊的名字：引入模塊的路徑
add:"demo/add",
mul:"demo/mul"
}
})
require(["add","mul"],function(addobj,mul){//引入了兩個模塊add和mul兩個模塊
//這裏的代碼，模塊引入之後執行
var res = addobj.outadd(10,20);//調用addjs中對外暴露的函數
var res1 = mul.outmul(5,2);
alert(res);
alert(res1);
addobj.outshow();
});
add模塊 一個同學開發的
a同學封裝 計算兩個數的和計算的模塊
可以寫多個函數，一般情況下我們把實現同類型功能的函數，放在一個模塊
遵從AMD規範
*/
define(function(){
function add(x,y){
return x + y;
}
function show(){
console.log("hello world");
}
function ccc(){
console.log("在mul中要使用的函數");
}
//對外暴露 外面只能調用對外暴露的函數
return{
outadd:add,
outshow:show,
outccc:ccc
}
});
另外一個同學開發的乘積的模塊，並且在乘積模塊中使用的a同學的加模塊方法
/*
小B同學開發的兩個數的乘積
當前模塊依賴add模塊
*/
define(["add"],function(add){
function mul(x,y){
add.outccc();
return x*y;
}
return{
outmul:mul
}
});
sass使用方法
讓.css像編程一樣進行樣式的開發
sass/scss
.sass 1.不能有大括號，不能有分號 必須通過嚴格代碼縮進進行編碼
.scss //1.可以有大括號，和分號 2.基本上使用方法和css語法方式一樣
sass 比較古老的版本
scss 改進的版本
sass 安裝及配置
大家可以去看一下sass官網的API文檔裏面有很詳細的說明，不過下載過程不用鏡像的話真的超慢
sass文件
//1.不能有大括號，不能有分號 必須通過嚴格代碼縮進進行編碼
body
margin: 0px
padding: 0px
scss文件
//1.可以有大括號，和分號
//2.基本上使用方法和css語法方式一樣
body{
margin: 0px;
padding: 0px;
}
1.聲明變量
$xxx:300px;
$xxx:100px; //普通變量
//默認變量
// $yyy:100px;
$yyy:200px !default;//默認變量，只要有一個新值就會將這個值覆蓋，無論前後
還有局部變量，全局變量和JavaScript語法一致
特殊變量
#{表達式/變量}; 進行字符串拼接
類似於js中的ECMA6 ${}
$zzz:top;
#div4{
border-#{$zzz}:1px soild black;//border-top: 1px soild black; 類似於字符串拼接
}
引入公共樣式
.js 引入.js文件
聲明公共樣式的時候
標準：_base.scss 一下寫一些項目開發是清除原由樣式的操作 比如margin 和padding 都設置爲0
引入：@import "base"
也可以引入混合（代碼塊） 再使用@include 混合名字() 調用混合即可
例：先創建兩個…js文件
@import "base";
@import "mixin";
#div1{
@include clearBoth;
}
控制指令
@if 條件控制
@for 循環控制
@ench 循環指令
@while 循環指令
繼承
@extends 進行繼承
例：
.btn{
width: 200px;
height: 5px;
a{
color: red;
&:hover{
background-color: orange;
color: yellow;
}
}
}
.btn-primary{
@extend .btn;
background-color: blue;
}
.btn-success{
@extend .btn;
background-color: green;
}
混合： 類似於C語言中的宏定義 相當於代碼塊
@mixin 混合名字() 聲明混合
@include 混合名字() 調用混合
注： 可以選擇有參數或者沒有參數
@mixin center-block {
margin-left: auto;
margin-top: auto;
}
//清除浮動
@mixin clearBoth {
content: "";
display: block;
height: 0px;
overflow: hidden;
visibility: hidden;
}
#div1{
@include center-block;
.box{
@include clearBoth;
}
}
//帶參數的混合
@mixin xxx($padding:30px,$border:1px solid black) {
border-right: $border;
border-top: $border;
padding-left: $padding;
}
#div2{
@include xxx;//不調用參數時 使用的默認值
.box{
@include xxx(50px);
}
.box2{
@include xxx(50px,3px dashed red );
}
.box3{
@include xxx($border:5px dashed orange);
}
}
自定義函數
@function 函數名稱(參數列表){
//數據處理
}
*/
$colors:(light:#ffffff,dark:#000000);
//傳入對應的key 返回對應的值
@function color($key){
@if not map-has-key($colors, $key){
//警告 警告不會中斷監聽
@warn "在這個映射裏沒有一個叫#{$key}的值";
//錯誤 會中斷監聽 並提示錯誤的位置
@error "在這個映射裏沒有一個叫#{$key}的值";
}
@return map-get($colors, $key);
}
body{
background-color: color(xxx);
}
嵌套：選擇器嵌套 和 屬性嵌套
//選擇器嵌套(常用)
#div1{
width: 100px;
.box{ //div裏面的.box
height: 200px;
}
a{
background-color: red;
//&符合 在scss中表示父級元素選擇器
&：hover{
color: orange;
background-color: blue;
}
}
}
//屬性嵌套（不常用）
#div1{
border: {
left: {
width: 100px;
style:solid;
color: red;
};
};
border-top: 2px dashed black;
}
//結果如下
/* #div1 {
border-left-width: 100px;
border-left-style: solid;
border-left-color: red; } */
7種數據類型
1.數字 包括10px
數字函數：
abs（）絕對值 round（）向上取整 ceil（）向下取整 floor（）取整
percentage（）計算百分比 min（） max（） 最小值最大值
2.字符串 帶引號 不帶引號 雙引號都是
3.顏色
4.布爾值
5.空值
6.列表（list）,用空格或逗號分隔（例：c 1.5em 1em 0 2em,helvetica,arial,sans-serif）
7.映射 map映射 鍵->值 （key1：value1，key2：value2）
具體函數的一些方法可以查詢api
註釋
1.普通註釋 不會顯示在.css文件中
/*
2.多行註釋 會出現在.css文件中 ，不會出現在壓縮版本中
*/
/!
3.強制註釋。在多行註釋第一個後加!
在任何版本下都會保留 壓縮版本也會存在
*/