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

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插件