自動化構建工具--gulp的初識和使用
阿新 • • 發佈：2018-11-24
gulp
首先：什麼是gulp?
gulp是前端開發過程中對程式碼進行構建的工具，是自動化專案的構建利器；她不僅能對網站資源進行優化，而且在開發過程中很多重複的任務能夠使用正確的工具自動完成；使用她，我們不僅可以很愉快的編寫程式碼，而且大大提高我們的工作效率。
安裝使用示例：
首先新建一個資料夾：music
然後安裝淘寶映象 cnpm，當然直接用npm也可以；
初始化資料夾並一路回車： cnpm init
會自動生成一個package.json 的檔案
然後執行cnpm install 會自動生成一個資料夾：node_modules，並將開發環境所需要的相關依賴檔案包全部下載到node_modules 資料夾下：
如果該檔案刪除，重新執行該命令，可以重新載入相關依賴：
安裝gulp：
$ cnpm install gulp --save-dev
-save-dev和--save的區別
- 會把gulp包安裝到node_modules目錄中
- 會在package.json的dependencies屬性下新增gulp
- 之後執行npm install命令時，會自動安裝gulp到node_modules目錄中
- --save---之後執行npm install --production或者註明NODE_ENV變數值為production時，會自動安裝gulp 到node_modules目錄中(開發完後需要用到依賴包，如jquery等)
- --save-dev--之後執行npm install --production或者註明NODE_ENV變數值為production時，不會自動安裝gulp 到node_modules目錄中（釋出後用不到它，而只是在我們開發才用到它
手動新建一個gulpfile檔案並配置：
簡單測試配置如下：
var gulp = require("gulp"); //壓縮圖片的外掛： var imagemin = require("glup-imagemin"); var folfer = { src : "./src/", build :"./build/", } //流讀取檔案 task running grunt gulp.task("image",function(){ console.log(111); gulp.src( "src/image/*") .pipe(imagemin()) .pipe(gulp.dest("build/image")) })
需要在終端安裝gulp相關外掛：
cnpm install gulp-imagemin --save-dev
之後就可以按需求壓縮圖片的命令了~！
另外擴充套件，一個外掛，gulp-newer 用來檢測是否有新的檔案，如果是新檔案，就進行壓縮，如果不是新的就不執行壓縮：
cnpm install gulp-newer --save-dev
相關gulpfile.js 中的配置：
var newer = require("gulp-newer"); gulp.task("image",function() { gulp.sec("src/image/*") .pipe( newer("image")) .pipe(imagemin()) .pipe(gulp.dset("build/image")) })
更多外掛安裝使用示例如下：
在本地資料夾下載外掛：npm install 外掛名 --save-dev
var gulp = require("gulp");//匯入glup var sass = require("gulp-sass");//拷貝並編譯scss var server = require("gulp-connect");//建立伺服器 var concat = require("gulp-concat");//合併js檔案 var uglify = require("gulp-uglify");//壓縮js檔案 var minifyCss = require("gulp-minify-css");//壓縮css var imagemin = require("gulp-imagemin");//壓縮圖片 var rename = require("gulp-rename");//檔案重新命名 var rev = require("gulp-rev");//給靜態資原始檔名新增一個雜湊值字尾 var revCollector = require("gulp-rev-collector");//自動新增版本號 var autoprefixer = require("gulp-autoprefixer");//對css新增瀏覽器字尾 var htmlmin = require("gulp-htmlmin");//對html頁面進行壓縮
//基本語法 Gulp.task(“任務名稱”，執行行數（）{ Return gulp.src(“操作的檔案路徑”).pipe(外掛名【與var定義名字相同】）{ 相關引數 })）【可執行操作多個pipe（）處理項】.pipe(gulp.dest(“返回結果的路徑”)) })；
gulp.task("addpre",function () {
return gulp.src("src/css/aa.css").pipe(autoprefixer({
browsers:['last 2 versions','Android>=4.0'],
cascade:true
})).pipe(gulp.dest("dist/css"))
})
//同時執行多項任務gulp.task(“合併的任務名”,[“任務1”,”任務2”,”任務3”,...]);
gulp.task("default",["copyindex","copy-img","copy-data"]);
<!--將src下的index頁面進行壓縮後拷貝到dist目錄下-->
gulp.task("copyindex",function () {
return gulp.src("src/index.html").pipe(htmlmin({
minifyCss:true,//壓縮css
minifyJS:true,//壓縮js
removeComment:true,//壓縮程式碼
collapseWhitespace:true//壓縮空白區域
})).pipe(gulp.dest("dist/"))
})
//批量拷貝
// src/images/**/*拷貝images下的所有檔案下的所有資源
gulp.task("copy-img",function () {
return gulp.src("src/images/**/*").pipe(imagemin()).pipe(gulp.dest("dist/images/"));
})
//多組拷貝和合並"!src/json/s-*.json"//排除s開頭的json檔案
//！檔名 表示排除
gulp.task("copy-data",function () {
return gulp.src(["src/json/*","src/xml/*","!src/json/s-*.json"]).pipe(gulp.dest("dist/data/"));
})
//編譯scss並拷貝到相關路徑
gulp.task("scss-c",function () {
return gulp.src("src/scss/**/*.scss").pipe(sass()).pipe(gulp.dest("dist/css/"));
})
//watch監控資料，一旦檔案，立即執行監視任務進行拷貝重新整理
gulp.task("watch",function () {
gulp.watch("src/index.html",["copyindex"]);
gulp.watch("src/images/**/*",["copy-img"]);
gulp.watch("src/json/*",["copy-data"]);
})
//建立本地伺服器
gulp.task("server",function () {
server.server({
root:"dist"
});
})
//js合併 與 .pipe(uglify())壓縮
gulp.task("js",function () {
return gulp.src("src/script**/*").pipe(concat("all.js")).pipe(uglify()).pipe(gulp.dest("dist/js/")).pipe(rename("all-min.js")).pipe(gulp.dest("dist/js/"))
})
//對css進行壓縮並建立json檔案自動新增版本號
gulp.task("css",function () {
return gulp.src("src/css/*.css").pipe(minifyCss()).pipe(rev()).pipe(gulp.dest("dist/css/")).pipe(rev.manifest()).pipe(gulp.dest("dist/css/"));
});
//用來替換HTML頁面上的link標籤src路徑（方便更改檔名）
gulp.task("rev-collector",function () {
return gulp.src(["dist/css/**/*.json","dist/index.html"]).pipe(revCollector({
replaceReved:true,
})).pipe(gulp.dest("dist/"))
});
已經配置好的gulpfile檔案，參考如下：
/** * Created by 13 **/ var gulp = require('gulp'); var clone = require('gulp-clone'); var htmlmin = require('gulp-htmlmin'); var gulpif = require('gulp-if'); var cssmin = require('gulp-minify-css'); var uglify = require('gulp-uglify'); var useref = require('gulp-useref'); var clean = require('gulp-clean'); var imagemin = require('gulp-imagemin'); //壓縮html gulp.task('html', function () { var options = { removeComments: true, //清除HTML註釋 collapseWhitespace: true, //壓縮HTML collapseBooleanAttributes: false, //省略布林屬性的值 <input checked="true"/> ==> <input checked /> removeEmptyAttributes: false, //刪除所有空格作屬性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true, //刪除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true, //刪除<style>和<link>的type="text/css" minifyJS: true, //壓縮頁面JS minifyCSS: true //壓縮頁面CSS }; return gulp.src('dev-pages/*.html') .pipe(htmlmin(options)) .pipe(gulp.dest('pages/')); }); //壓縮js gulp.task('jsmin', function() { return gulp.src(['dev-source/js/ajax.js','dev-source/js/ajax_my.js']) .pipe(uglify({ mangle: false })) .pipe(gulp.dest('source/js/')) }) // 拷貝圖片檔案 gulp.task('image-copy', function () { return gulp.src('source-dev/webslice/**/*') .pipe(clone()) .pipe(gulp.dest('source/webslice')); }); gulp.task('image-min', function () { return gulp.src('dev-source/images/*.{png,jpg}') .pipe(imagemin()) .pipe(gulp.dest('source/images/')); }); //先複製圖片到source，然後再執行壓縮。 gulp.task('image-min2', ['image-copy'], function () { return gulp.src('source/webslice/**/*') .pipe(imagemin()) .pipe(gulp.dest('source/webslice/')); }); gulp.task('image-min3', function () { return gulp.src('dev-source/webview/img/*.{png,jpg}') .pipe(imagemin()) .pipe(gulp.dest('source/webview/img/')); }); //壓縮圖片 gulp.task('images-min',['image-min','image-min2','image-min3'],function() {}) //監聽兩個檔案的檔案變化 gulp.task('listenPages', function() { gulp.watch('dev-pages/*.html',['html']); gulp.watch('dev-source/js/*.js',['jsmin']); }); // 構建任務流 // 執行 task build gulp.task('build', ['html', 'image-min','jsmin']);
更多外掛安裝使用示例如下：
在本地資料夾下載外掛：npm install 外掛名 --save-dev
var gulp = require("gulp");//匯入glup var sass = require("gulp-sass");//拷貝並編譯scss var server = require("gulp-connect");//建立伺服器 var concat = require("gulp-concat");//合併js檔案 var uglify = require("gulp-uglify");//壓縮js檔案 var minifyCss = require("gulp-minify-css");//壓縮css var imagemin = require("gulp-imagemin");//壓縮圖片 var rename = require("gulp-rename");//檔案重新命名 var rev = require("gulp-rev");//給靜態資原始檔名新增一個雜湊值字尾 var revCollector = require("gulp-rev-collector");//自動新增版本號 var autoprefixer = require("gulp-autoprefixer");//對css新增瀏覽器字尾 var htmlmin = require("gulp-htmlmin");//對html頁面進行壓縮
//基本語法 Gulp.task(“任務名稱”，執行行數（）{ Return gulp.src(“操作的檔案路徑”).pipe(外掛名【與var定義名字相同】）{ 相關引數 })）【可執行操作多個pipe（）處理項】.pipe(gulp.dest(“返回結果的路徑”)) })；
gulp.task("addpre",function () {
return gulp.src("src/css/aa.css").pipe(autoprefixer({
browsers:['last 2 versions','Android>=4.0'],
cascade:true
})).pipe(gulp.dest("dist/css"))
})
//同時執行多項任務gulp.task(“合併的任務名”,[“任務1”,”任務2”,”任務3”,...]);
gulp.task("default",["copyindex","copy-img","copy-data"]);
<!--將src下的index頁面進行壓縮後拷貝到dist目錄下-->
gulp.task("copyindex",function () {
return gulp.src("src/index.html").pipe(htmlmin({
minifyCss:true,//壓縮css
minifyJS:true,//壓縮js
removeComment:true,//壓縮程式碼
collapseWhitespace:true//壓縮空白區域
})).pipe(gulp.dest("dist/"))
})
//批量拷貝
// src/images/**/*拷貝images下的所有檔案下的所有資源
gulp.task("copy-img",function () {
return gulp.src("src/images/**/*").pipe(imagemin()).pipe(gulp.dest("dist/images/"));
})
//多組拷貝和合並"!src/json/s-*.json"//排除s開頭的json檔案
//！檔名 表示排除
gulp.task("copy-data",function () {
return gulp.src(["src/json/*","src/xml/*","!src/json/s-*.json"]).pipe(gulp.dest("dist/data/"));
})
//編譯scss並拷貝到相關路徑
gulp.task("scss-c",function () {
return gulp.src("src/scss/**/*.scss").pipe(sass()).pipe(gulp.dest("dist/css/"));
})
//watch監控資料，一旦檔案，立即執行監視任務進行拷貝重新整理
gulp.task("watch",function () {
gulp.watch("src/index.html",["copyindex"]);
gulp.watch("src/images/**/*",["copy-img"]);
gulp.watch("src/json/*",["copy-data"]);
})
//建立本地伺服器
gulp.task("server",function () {
server.server({
root:"dist"
});
})
//js合併 與 .pipe(uglify())壓縮
gulp.task("js",function () {
return gulp.src("src/script**/*").pipe(concat("all.js")).pipe(uglify()).pipe(gulp.dest("dist/js/")).pipe(rename("all-min.js")).pipe(gulp.dest("dist/js/"))
})
//對css進行壓縮並建立json檔案自動新增版本號
gulp.task("css",function () {
return gulp.src("src/css/*.css").pipe(minifyCss()).pipe(rev()).pipe(gulp.dest("dist/css/")).pipe(rev.manifest()).pipe(gulp.dest("dist/css/"));
});
//用來替換HTML頁面上的link標籤src路徑（方便更改檔名）
gulp.task("rev-collector",function () {
return gulp.src(["dist/css/**/*.json","dist/index.html"]).pipe(revCollector({
replaceReved:true,
})).pipe(gulp.dest("dist/"))
});