一、開始

使用gulp，需知道4個(gè)API：

　　gulp.task():用來(lái)定義任務(wù),

　　　　　　　　　 格式：gulp.task(name[, deps], fn)

　　　　　　　　 ? ?name?為任務(wù)名

　　　　　　　　 ? ?deps?是當(dāng)前定義的任務(wù)需要依賴的其他任務(wù)，為一個(gè)數(shù)組。當(dāng)前定義的任務(wù)會(huì)在所有依賴的任務(wù)執(zhí)行完畢后才開始執(zhí)行。如果沒有依賴，則可省略這個(gè)參數(shù)
　　　　　　　　 ? ?fn?為任務(wù)函數(shù)，我們把任務(wù)要執(zhí)行的代碼都寫在里面。該參數(shù)也是可選的。

　　gulp.src()：用來(lái)讀取文件,

　　　　　　　 ?　格式：gulp.src(globs[, options])，

　　　　　　　　 ?globs ?參數(shù)是文件匹配模式(類似正則表達(dá)式)，用來(lái)匹配文件路徑(包括文件名)，當(dāng)然這里也可以直接指定某個(gè)具體的文件路徑。當(dāng)有多個(gè)匹配模式時(shí)，該參數(shù)可以為一個(gè)數(shù)組。
　　　　　　　　 ?options ?為可選參數(shù)。通常情況下我們不需要用到。

　　gulp.dest()：用來(lái)寫文件的：,

　　　　　　　　　格式：gulp.dest(path[,options])

　　　　　　　　　path ?為寫入文件的路徑
　　　　　　　　　options ?為一個(gè)可選的參數(shù)對(duì)象，通常我們不需要用到

　　gulp.watch()：用來(lái)監(jiān)視文件的變化，當(dāng)文件發(fā)生變化后，我們可以利用它來(lái)執(zhí)行相應(yīng)的任務(wù)，例如文件壓縮等,

　　　　　　　　　 ? 格式：gulp.watch(glob[, opts], tasks)

　　　　　　　　 ?　?glob? 為要監(jiān)視的文件匹配模式，規(guī)則和用法與gulp.src()方法中的glob相同。
　　　　　　　　　 ? opts??為一個(gè)可選的配置對(duì)象，通常不需要用到
　　　　　　　　 ? 　tasks? 為文件變化后要執(zhí)行的任務(wù)，為一個(gè)數(shù)組

?

二、實(shí)例

　　需要先安裝gulp

　npm install -g gulp

　　手動(dòng)建立一個(gè)gulpfile.js文件，作為入口，

　　初始化，引入gulp　　

npm init; npm install --save-dev gulp;

　　然后在gulpfile.js寫入

var gulp = require('gulp');var plugins = require('gulp-load-plugins')();var src = {js: 'js/*.js',html: './*.html',css: 'css/*css',img: 'img/**' }var buildGulp = {// html 打包buildHtml: () => {gulp.src(src.html).pipe(plugins.minifyHtml()).pipe(gulp.dest('./dist'));},// css 打包buildCss: () => {gulp.src(src.css).pipe(plugins.minifyCss()).pipe(gulp.dest('dist/css'));},// js 打包buildJs: () => {gulp.src(src.img).pipe(plugins.imagemin()).pipe(gulp.dest('dist/img'));},// img打包buildImg: () => {gulp.src(src.js).pipe(plugins.uglify()).pipe(gulp.dest('dist/js'));}, };gulp.task('default',function(){gulp.start('build') });gulp.task('build', function(){for ( var i in buildGulp){buildGulp[i]();} });

我們用gulp-uglify壓縮js, gulp-minify-css壓縮css, gulp-minify-html壓縮html，gulp-imagemin壓縮圖片

為避免在文件頭部引入依賴時(shí)過去冗長(zhǎng)，引入gulp-load-plugins來(lái)從package.json中引入依賴，通過調(diào)用實(shí)例中的方法來(lái)加載依賴，加載方式為按需加載

?

最后執(zhí)行g(shù)ulp，會(huì)從名稱為default的task開始執(zhí)行，打包文件，輸出的文件由gulp.dest設(shè)置在dist目錄下

轉(zhuǎn)載于:https://www.cnblogs.com/lastnigtic/p/6974961.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的gulp基础使用方法记录的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。