資訊專(zhuān)欄INFORMATION COLUMN
摘要：的使用首先，我們需要在官網(wǎng)下載插件，地址如下在這個(gè)網(wǎng)站我們可以尋找到自己需要的插件以為例，然后在項(xiàng)目下打開(kāi)命令提示行，輸入以下命令然后我們?cè)诶镙斎胍幌麓a引入插件調(diào)用插件輸出位置
gulp的入門(mén)與使用
安裝
使用
gulp的入門(mén) 安裝安裝gulp需要使用到nodo.js,安裝鏈接如下：
http://jingyan.baidu.com/arti...
安裝完成之后我們以全局安裝gulp
打開(kāi)命令提示行，輸入以下命令:
npm install gulp-cli -g
然后我們建立自己的項(xiàng)目
在自己的項(xiàng)目目錄下，打開(kāi)命令提示行，因?yàn)槲覀冃枰?
" package.json "文件，所以我們需要輸入以下命令：
npm init
之后我們需要在項(xiàng)目目錄下安裝gulp
輸入以下命令
npm install gulp -D
我們還需要自己手動(dòng)建立一個(gè)gulpfile.js文件，
打開(kāi)gulpfile.js,輸入以下代碼：
var gulp = require("gulp");
// 引入gulp
gulp.task("default", function() {
console.log("測(cè)試");
});
在剛剛的命令提示行輸入：
gulp
得到以下輸出
Using gulpfile F:webgulpfile.js Starting "default"... 測(cè)試 Finished "default" after
說(shuō)明你的gulp已經(jīng)安裝成功。
gulp的使用首先，我們需要在gulp官網(wǎng)下載插件，地址如下:
https://gulpjs.com/plugins/
在這個(gè)網(wǎng)站我們可以尋找到自己需要的插件（以gulp-imagemin為例），然后在項(xiàng)目下打開(kāi)命令提示行，輸入以下命令：
npm install --save-dev gulp-imagemin --save-dov
然后我們?cè)趃ulpfile.js里輸入一下代碼:
const imagemin = require("gulp-imagemin");
// 引入插件
gulp.task("default", () =>
gulp.src("src/images/*")
.pipe(imagemin())
// 調(diào)用插件
.pipe(gulp.dest("dist/images"))
// 輸出位置
);
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/91433.html
摘要：所以它在某些程度上，跟的功能有些相同。嚴(yán)格上講，模塊化不是他強(qiáng)調(diào)的東西，他旨在規(guī)范前端開(kāi)發(fā)流程。更是明顯強(qiáng)調(diào)模塊化開(kāi)發(fā)，而那些文件壓縮合并預(yù)處理等功能，不過(guò)是他附帶的功能。 1. webpack 是什么? showImg(https://segmentfault.com/img/remote/1460000012293461); 先來(lái)說(shuō)一下 webpack 是什么。 webpack 的...
摘要：本文假設(shè)你之前沒(méi)有用過(guò)任何任務(wù)腳本和命令行工具，一步步教你上手。如果這兩行命令沒(méi)有得到返回，可能就沒(méi)有安裝正確，嘗試重啟下命令行工具，如果還不行的話，只能回到第一步進(jìn)行重裝。 本文假設(shè)你之前沒(méi)有用過(guò)任何任務(wù)腳本（task runner）和命令行工具，一步步教你上手Gulp。不要怕，它其實(shí)很簡(jiǎn)單，我會(huì)分為五步向你介紹gulp并幫助你完成一些驚人的事情。那就直接開(kāi)始吧。 第一步：安裝No...
摘要：是一款流式構(gòu)建系統(tǒng)，如果說(shuō)是基于任務(wù)執(zhí)行器，就是基于的文件流任務(wù)執(zhí)行器，比起有如下特點(diǎn)使用方便通過(guò)代碼優(yōu)于配置的策略，可以讓簡(jiǎn)單的任務(wù)簡(jiǎn)單，復(fù)雜的任務(wù)更可管理。 作者：Jogis原文鏈接：https://github.com/yesvods/Blog/issues/1轉(zhuǎn)載請(qǐng)注明原文鏈接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...
摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒(méi)想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...
閱讀 2757·2023-04-25 15:15
閱讀 1389·2021-11-25 09:43
閱讀 1659·2021-11-23 09:51
閱讀 1161·2021-11-12 10:36
閱讀 2948·2021-11-11 16:55
閱讀 1023·2021-11-08 13:18
閱讀 800·2021-10-28 09:31
閱讀 2112·2019-08-30 15:47
