入門gulp，這篇文章就夠了

1.安裝運行gulp

1.1 全局安裝gulp

npm install -g gulp

1.2 生成一個package.json

npm init

記得要把入口文件（entry point)設置爲gulpfile.js

1.3 安裝gulp做爲項目依賴

npm install --save-dev gulp@3.9.1

這裏有個坑，這裏要下在gulp3.9.1的版本，gulp4與gulp3的語法有所不一樣

1.4 在項目根目錄下建立一個名爲gulpfile.js的 文件

var gulp = require('gulp');
gulp.task('default',function(){
   console.log('運行gulp');
})
複製代碼

1.5 運行gulp

gulp

2.gulp實戰

2.1必會知識點

gulp用task來建立任務gulp.task(任務名，[先執行的任務],執行任務的函數)

gulp默認會執行名爲default的任務

gulp.task('default',['html','css','js']，function(){
    console.log('default默認執行')
})
在執行default以前，他會先去執行數組中的任務
即先執行html任務，css任務，js任務，在執行default任務
複製代碼

gulp用src來讀取文件

gulp.src("src/css/*")gulp會去讀取src/css目錄下的全部文件

gulp用dest來寫入文件

gulp.dest('dist/css/')gulp會將讀取的文件寫入到dist/css文件下，寫入的文件名跟讀取時的文件名一致

gulp用pipe來當作管道，所謂管道即從水管的一頭能夠流向另外一頭

gulp.src('src/css/*')
	.pipe(gulp.dest('dist/css/'))
// gulp.src讀取文件,gulp.dest寫入文件，
// pipe則將讀取的文件傳送給gulp.dest寫入
複製代碼

gulp.watch('src/css/*',['css'])

watch會去監聽src/css目錄下的全部文件，一旦文件發生更改，則取執行css任務

2.2運用gulp

首先建立以下目錄

└─dist
│   	  
└─src
│   ├─css
│   ├─html
│   ├─imgs
│   └─js
│
└─gulpfile.js
│
└─package-lock.json
│
└─package.json
│
└─node_modules
複製代碼

src是咱們的工做目錄，而dist是咱們的輸出目錄

如今咱們要將src目錄下的文件輸出到dist目錄下

// gulpfile.js
var gulp = require("gulp");
var folder = {
    src:'src/',
    dist:'dist/'
}
gulp.task('css',function(){
    gulp.src(folder.src+"css/*")
    	.pipe(gulp.dest(folder.dist+"css/"))
})

gulp.task('html',function(){
    gulp.src(folder.src+"html/*")
    	.pipe(gulp.dest(folder.dist+"html/"))
})

gulp.task('js',function(){
    gulp.src(folder.src+"js/*")
    	.pipe(gulp.dest(folder.dist+"js/"))
})

gulp.task('default',['html','css','js'])

//當前目錄下，命令行 gulp 啓動gulp
複製代碼

這就是基本的gulp工做流程了

固然這只是簡單地將src目錄下的文件搬到dist文件下，如今我要介紹都多個gulp經常使用的插件

1. 壓縮html--->gulp-htmlclean

var htmlClean = require('gulp-htmlclean');
gulp.task('html',function(){
    gulp.src(folder.src+"html/*")
    	.pipe(htmlClean) //先壓縮再寫入
    	.pipe(gulp.dest(folder.dist+"html/"))
})
複製代碼

2. 壓縮圖片--->gulp-imagemin

var imageMin = require(gulp-imagemin);
gulp.task('img',function(){
    gulp.src(folder.src+"img/*")
    	.pipe(imageMin())
    	.pipe(gulp.dest(folder.dist+'img/'))
})
複製代碼

3. 壓縮js--->gulp-uglify

var uglify = require('gulp-uglify');
gulp.task('js',function(){
    gulp.src(folder.src+'js/*')
    	.pipe(uglify())
    	.pipe(gulp.dest(folder.dist+'js/'))
})
複製代碼

4. 給css加前綴

   gulp-postcss

   autoprefixer

var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
gulp.task('css',function(){
   gulp.src(folder.src+"css/*")
    	.pipe(postcss([autoprefixer()])) //重點，注意看怎麼寫
    	.pipe(gulp.dest(folder.dist+"css/"))
})
複製代碼

好了，看到這裏你們應該都知道使用插件了，如今我將剩下的插件和其功能列在下方

• gulp-strip-debug 去除js中的全部調試語句、debug語句
• gulp-sass 將sass轉化爲css
• gulp-clean-css 壓縮css

重點！！重點！！還有個插件是gulp-connect，能夠開啓服務器，並實時刷新

var connect = require('gulp-connect');
gulp.task('server',function(){
    connect.server({
        port:8888.//端口號
        livereload:true,//開啓實時刷新
    })
})
//
gulp.task('css',function(){
   gulp.src(folder.src+"css/*")
    	.pipe(connect.reload())//加了connect.reload()後才能在瀏覽器實時看到最新變化
    	.pipe(postcss([autoprefixer()])) //重點，注意看怎麼寫
    	.pipe(gulp.dest(folder.dist+"css/"))
})

複製代碼

好了到這裏，你可能會嫌煩，每次改動gulpfile.js，就要在命令行輸入一次gulp執行。

想省點力氣 ，那麼看看watch這個方法

gulp.task('watch',function(){
    gulp.watch(folder.src+"html/*",['html']);//src目錄下的html一有更改，就會執行html任務
    gulp.watch(folder.src+"css/*",['css']);
    gulp.watch(folder.src+"js/*",['js']);
    gulp.watch(folder.src+'imgs/*',['img'])
})
複製代碼

2.3 優化gulp

在上一小節中，咱們運用了不少壓縮文件的插件，可是咱們但願在生產環境下，壓縮文件。

開發環境下，不壓縮文件

在node環境中設置環境變量

export NODE_ENV = development//開發環境
複製代碼

gulpfile.js

var devMod = process.env.NODE_ENV =='development'
gulp.task('css',function(){
    var page = gulp.src(folder.src+'css/*')
    if(！devMod){
        page.pipe(cleancss())
    }
    page.pipe((gulp.dest(folder.dist+'css/')))
})
複製代碼

3. 代碼下載地址

全部代碼示例地址：git@github.com:huzhiwu1/test-gulp.git

結語

由於本人水平有限，若是有錯漏的地方，還請看官多多指正

本文做者胡志武，寫於2019/5/25，若是要轉載，請註明出處，

若是以爲寫的不錯， 請點個贊吧