gulp.js
const gulp = require("gulp");
/*
原理：
管道機制 基於流的自動化工具
步驟
1、開啟任務 gulp.task() 參數1:任務名稱 參數2：回調函數 (任務名稱的集合)
2、輸入源 gulp.src() 文件存儲的路徑
3、管道 pipe 需要文件工作的一個流程
4、輸出源 gulp.dest() 文件存儲的路徑
輸入源 管道 輸出源
飯盆 你媽媽的嘴 你的嘴
index.html 壓縮 dist文件夾中
*/
//文件拷貝
//創建了一個任務copyindex
gulp.task("copyIndex",function(){
//找到輸入源
gulp.src("src/html/index.html")
//通過管道給了輸出源
.pipe(gulp.dest("dist/html"))
})
gulp.task("copyCss",function(){
gulp.src("src/css/*")
.pipe(gulp.dest("dist/css"))
})
gulp.task("copyImg",function(){
//src的img文件夾下面的一個或多個文件夾中的所有文件
gulp.src("src/img/**/*")
.pipe(gulp.dest("dist/css"))
})
//匹配多個屬性
gulp.task("copyImg",function(){
//匹配src文件夾下面的img下面0個或多個文件夾下面的所有文件裏面的 png文件或者jpg文件
gulp.src("src/**/*.{png,jpg}")
.pipe(gulp.dest("dist/css"))
})
//圖片壓縮
//引入圖片壓縮的模塊
const imgMin = require("gulp-imagemin");
//開啟任務
gulp.task("imgMin",function(){
gulp.src("src/img/**/*")
//在管道中壓縮
.pipe(imgMin())
//壓縮完畢後存放在dist目錄下面的img文件夾下
.pipe(gulp.dest("dist/img"))
})
//壓縮js
const jsMin = require("gulp-uglify");
//開啟任務
gulp.task("jsMin",function(){
gulp.src("src/js/**/*")
.pipe(jsMin())
.pipe(gulp.dest("dist/js"))
})
//壓縮css 編譯sass
const cssMin = require("gulp-sass-china");
gulp.task("cssMin",function(){
gulp.src("src/sass/**/*")
//壓縮並編譯
.pipe(cssMin({
//sass編譯的樣式
outputStyle:"compressed"
}))
.pipe(gulp.dest("src/css"))
})
//監聽
gulp.task("watch",function(){
//當sass文件夾下面的文件發送變化的時候我就去執行cssMin這個任務
gulp.watch("src/sass/**/*",["cssMin"])
})
//-----------開始
//開啟服務器
const connect = require("gulp-connect");
//跨域處理
const proxy = require("http-proxy-middleware");
gulp.task("server",function(){
connect.server({
root:"src",
port:8877,
//是否更新
livereload:true,
//跨域處理
middleware:function(){
return [
//localhost:8877/v4
//第一個參數是請求的地址 第二個參數是將當前地址轉換到哪個一個主機之上
proxy("/v4",{
//代理的主機頭 協議域名端口
target:"https://m.maizuo.com",
changeOrigin:true
}),
proxy("/commonHeader",{
//代理的主機頭 協議域名端口
target:"https://mapi.m.jd.com",
changeOrigin:true
})
]
}
})
})
//熱更新
gulp.task("watch-server",function(){
//監聽src下面所有的文件，當文件發生了改變以後
gulp.watch("src/**/*",function(){
//讓服務器刷新更新所有文件
gulp.src("src/**/*")
.pipe(connect.reload(true))
})
})
gulp.task("F5",["server","watch-server","cssMin"]);
//----結束
//合並文件
const concat = require("gulp-concat");
gulp.task("concat",function(){
gulp.src(["src/js/js/ajax.js","src/js/js/lunbo.js"])
.pipe(concat("abc.js"))
.pipe(gulp.dest("dist/js"))
})
//ES6轉ES5
const babes = require(‘gulp-babel‘);
const babel = require(‘gulp-babel‘);
gulp.task(‘babel‘, () =>
gulp.src(‘src/es6.js‘)
.pipe(babel({
presets: [‘@babel/env‘]
}))
.pipe(gulp.dest(‘dist‘))
);
gulp:
基於流的自動化工具
合並文件
壓縮文件
熱更新
開啟服務器
代碼轉義
......
node
webpack gulp 基於node
node
Node.js 的包管理器 npm，是全球最大的開源庫生態系統
1、npm是一個包
2、npm是一個網站
3、是一個命令
1、全局安裝gulp
cnpm install gulp -g
2、如果需要使用gulp的時候
a、cnpm init 初始化倉庫
b、局部安裝gulp cnpm install gulp --save-dev
--save：將保存配置信息至package.json
-dev：保存至package.json的devDependencies節點
c、創建一個gulpfile.js文件
3、pageage.json node_modules gulpfile三個文件必須在同一目錄
4、運行任務
gulp 任務名稱
const gulp = require("gulp");
/*原理：管道機制 基於流的自動化工具
步驟1、開啟任務 gulp.task() 參數1:任務名稱 參數2：回調函數 (任務名稱的集合)
2、輸入源 gulp.src() 文件存儲的路徑
3、管道 pipe 需要文件工作的一個流程
4、輸出源 gulp.dest() 文件存儲的路徑
輸入源 管道 輸出源飯盆 你媽媽的嘴 你的嘴
index.html 壓縮 dist文件夾中
*/
//文件拷貝//創建了一個任務copyindexgulp.task("copyIndex",function(){//找到輸入源gulp.src("src/html/index.html")//通過管道給了輸出源.pipe(gulp.dest("dist/html"))})
gulp.task("copyCss",function(){gulp.src("src/css/*").pipe(gulp.dest("dist/css"))})
gulp.task("copyImg",function(){//src的img文件夾下面的一個或多個文件夾中的所有文件gulp.src("src/img/**/*").pipe(gulp.dest("dist/css"))})
//匹配多個屬性gulp.task("copyImg",function(){//匹配src文件夾下面的img下面0個或多個文件夾下面的所有文件裏面的 png文件或者jpg文件gulp.src("src/**/*.{png,jpg}").pipe(gulp.dest("dist/css"))})
//圖片壓縮//引入圖片壓縮的模塊const imgMin = require("gulp-imagemin");//開啟任務gulp.task("imgMin",function(){gulp.src("src/img/**/*")//在管道中壓縮.pipe(imgMin())//壓縮完畢後存放在dist目錄下面的img文件夾下.pipe(gulp.dest("dist/img"))})
//壓縮jsconst jsMin = require("gulp-uglify");//開啟任務gulp.task("jsMin",function(){gulp.src("src/js/**/*").pipe(jsMin()).pipe(gulp.dest("dist/js"))})
//壓縮css 編譯sassconst cssMin = require("gulp-sass-china");gulp.task("cssMin",function(){gulp.src("src/sass/**/*")//壓縮並編譯.pipe(cssMin({//sass編譯的樣式outputStyle:"compressed"})).pipe(gulp.dest("src/css"))})
//監聽
gulp.task("watch",function(){//當sass文件夾下面的文件發送變化的時候我就去執行cssMin這個任務gulp.watch("src/sass/**/*",["cssMin"])})
//-----------開始
//開啟服務器const connect = require("gulp-connect");//跨域處理const proxy = require("http-proxy-middleware");
gulp.task("server",function(){connect.server({root:"src",port:8877,//是否更新livereload:true,//跨域處理middleware:function(){return [//localhost:8877/v4//第一個參數是請求的地址 第二個參數是將當前地址轉換到哪個一個主機之上proxy("/v4",{//代理的主機頭 協議域名端口target:"https://m.maizuo.com",changeOrigin:true}),proxy("/commonHeader",{//代理的主機頭 協議域名端口target:"https://mapi.m.jd.com",changeOrigin:true})]}})})
//熱更新gulp.task("watch-server",function(){//監聽src下面所有的文件，當文件發生了改變以後gulp.watch("src/**/*",function(){//讓服務器刷新更新所有文件gulp.src("src/**/*").pipe(connect.reload(true))})})
gulp.task("F5",["server","watch-server","cssMin"]);
//----結束
//合並文件const concat = require("gulp-concat");
gulp.task("concat",function(){gulp.src(["src/js/js/ajax.js","src/js/js/lunbo.js"]).pipe(concat("abc.js")).pipe(gulp.dest("dist/js"))})
//ES6轉ES5const babes = require(‘gulp-babel‘);
const babel = require(‘gulp-babel‘); gulp.task(‘babel‘, () => gulp.src(‘src/es6.js‘) .pipe(babel({ presets: [‘@babel/env‘] })) .pipe(gulp.dest(‘dist‘)));
gulp.js