自動化構建工具--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/")) });