gulp自動化構建工具學習分享

機智littlebrother發表於2017-11-27

Gulp與Grunt差不多,也是一款構建工具,它能夠自動執行我們前端常見的任務,
如編譯Sass、Less,壓縮js和重新整理瀏覽器等等,以此來改進前端的工作方式,提高生產力.

使用需用

 安裝Node.js
    由於Gulp是基於Node.js構建的,
    所以在使用Gulp之前,首先安裝Node.js(自行搜尋node.js安裝),
    安裝Node.js方式非常簡單,下載後執行安裝包,一直下一步即可,
    安裝完成後開啟cmd控制檯(window)輸入 node-v 查詢版本號確認node安裝完畢。複製程式碼

初始化專案

讓當前目錄作為專案資料夾開始初始化,
專案初始化指令--> npm init 初始化完後會有一個package.json的檔案裡面是一些描述專案的一些記錄,
專案名稱、作者、開發時依賴的一些外掛,

不初始化也可以使用gulp。

package.json 說明

name //專案名稱
version //專案版本號
description //專案描述
homepage //專案官網url
author //作者名
contributors // 專案其他貢獻者
dependencies //專案依賴列表
devDependencies //開發環境依賴的列表
repository //專案程式碼存放的地方型別, git/svn
main //它是一個模組ID它是一個指向你程式的主要專案
keywords //關鍵字複製程式碼

安裝Gulp

在cmd控制檯下輸入命令進行安裝Gulp -g代表是全域性安裝

npm install -g gulp

全域性安裝後,要想在專案裡使用還得在專案的資料夾下,安裝本地gulp --save-dev會把外掛記錄記錄在package.json中。

npm install gulp -save-dev //在專案資料夾下使用

使用Gulp

在專案資料夾下建立一個 gulpfile.js 檔案,

然後在gulpfile.js中開始編寫gulp外掛,

gulp常用外掛 - - - - v

gulp-minify-css --- css壓縮

上面流程走完後安裝gulp-minify-css

npm install --save-dev gulp-minify-css

然後開始編寫 gulpfile.js檔案

var gulp = requrie('gulp'); // 引入gulp
var minify=require('gulp-minify-css');//引入壓縮css的模組
//建立一個壓縮任務
gulp.task('minifycss',function(){
    //指定當前檔案下的所有字尾為.css的檔案
    gulp.src('*.css')
    //使用minify模組進行壓縮
    .pipe(minify())
    //最終將壓縮的檔案輸出到minicss檔案下
    .pipe(gulp.dest('minicss'))
    })複製程式碼

gulp-uglify --- js壓縮

以上為例安裝壓縮js的外掛

npm install --save-dev gulp-uglify

var gulp =require('gulp'); //引入gulp
var uglify = require('gulp-uglify');//引入js壓縮模組

//建立一個壓縮js的任務
gulp.task('minifyjs',function(){
    //指定當前資料夾下的所有JS檔案
    gulp.src('*.js')
    //進行重新命名 可以設定名字為類似(mini.min.js)
    .pipe(rename({suffix:'.min'}))
    //進行壓縮
    .pipe(uglify())
    //將壓縮後的檔案輸出到minijs資料夾下
    .pipe(gulp.dest('minijs'))
})複製程式碼

gulp-minify-html --- html壓縮

以上為例安裝壓縮html的外掛

npm install --save-dev gulp-minify-html

var gulp =require('gulp'); //引入gulp
var minhtml =require('gulp-minify-html');//引入js壓縮模組

//建立一個壓縮html的任務
gulp.task('minhtml',function(){
    //指定當前資料夾下的所有html檔案
    gulp.src('*.html')
    //進行壓縮
    .pipe(minhtml())
    //將壓縮後的檔案輸出到minihtml資料夾下
    .pipe(gulp.dest('minihtml'))
})複製程式碼

gulp-jshint --- 檢查js

以上為例安裝檢測js的外掛

npm install --save-dev jshint gulp-jshint

var gulp =require('gulp'); //引入gulp
var concat = require('gulp-jshint');//引入檢測js檔案模組

//建立一個檢測js的任務
gulp.task('concat',function(){
    //指明要檢測的檔案
    gulp.src('*.js')
    .pipe(jshint())
    //輸出檢查結果
    .pipe(jshint.reporter());
})複製程式碼

gulp-concat --- 檔案合併

以上為例安裝檔案合併的外掛

npm install --save-dev gulp-concat

var gulp =require('gulp'); //引入gulp
var concat = require('gulp-concat');//引入合併檔案模組

//建立一個合併任務
gulp.task('concat',function(){
    //指明要合併的檔案
    gulp.src('*.js')
    //合併找到的js檔案並命名為'merge.js'
    .pipe(concat('merge.js'))
    //將合併後的檔案輸出到concat資料夾下
    .pipe(gulp.dest('concat'));
})複製程式碼

gulp-less --- 編譯Less

以上為例安裝編譯Less的外掛

npm install --save-dev gulp-less

var gulp =require('gulp'); //引入gulp
var lecss = require('gulp-less');//引入編譯模組

//建立一個編譯任務
gulp.task('compile-less',function(){
    //指明要編譯的檔案
    gulp.src('*.less')
    //進行編譯
    .pipe(lecss())
    //將編譯後的檔案輸出到css資料夾下
    .pipe(gulp.dest('css'));
})複製程式碼

gulp-sass --- 編譯Sass

以上為例安裝編譯Sass的外掛

npm install --save-dev gulp-sass

var gulp =require('gulp'); //引入gulp
var sacss = require('gulp-sass');//引入編譯模組

//建立一個編譯任務
gulp.task('compile-sass',function(){
    //指明要編譯的檔案
    gulp.src('*.sass')
    //進行編譯
    .pipe(sacss())
    //將編譯後的檔案輸出到css資料夾下
    .pipe(gulp.dest('css'));
})複製程式碼

gulp-imagemin --- 壓縮圖片

以上為例安裝壓縮圖片外掛

npm install --save-dev gulp-imagemin

var gulp =require('gulp'); //引入gulp
var imagemin = require('gulp-imagemin');


//建立一個壓縮任務
gulp.task('pngquant',function(){
    gulp.src('src/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            progressive:true,//Boolean型別 預設:false 無失真壓縮圖片
            optimizationLevel:5,//number型別 預設:3 取值範圍:0-7(優化等級)
            interlced:true,//Boolean型別 預設false 隔行掃描gif進行渲染
            multipass:true //Boolean型別 預設false 多次優化svg直到完全優化
            //開始壓縮png圖片
        }))
        .pipe(gulp.dest('img'))

})複製程式碼

gulp-livereload --- 自動重新整理

以上為例安裝自動重新整理的外掛

npm install --save-dev gulp-livereload

當程式碼變化時可以幫助我們自動重新整理頁面。

// 基本使用(當less發現變化的時候自動更新頁面)
var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload');

gulp.task('less', function() {
    gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('src/css'))
        .pipe(livereload());
});

gulp.task('watch', function() {
  livereload.listen(); //要在這裡呼叫listen()方法
  gulp.watch('less/*.less', ['less']);  //監聽目錄下的檔案，若檔案發生變化，則呼叫less任務。
});複製程式碼

谷歌瀏覽器或者火狐瀏覽器需要安裝livereload外掛

相關文章