gulp的基本使用

gulp

瞭解

首先咱們瞭解一下什麼是gulp, gulp是前端自動化構建工具,在開發過程當中不少重複的任務，咱們均可以正確的使用gulp來完成，gulp基於nodejs,使用gulp能夠作不少事情
例如gulp轉less語法，js壓縮,css壓縮,html壓縮,下面我大致說一下這個gulp的主流程

gulp

• 官網
• gulp插件
• 中文網

---

gulp的主流程

• 首先你要安裝nodejs環境.
• 全局安裝gulp,而後你每次使用gulp的項目中還要安裝一下gulp以及你在項目中所用到的插件也安裝好.
• 而後你在運行該命令行的目錄下新建一個名爲gulpfile.js,並在裏面寫好配置信息，
• 而後再運行gulp任務就ok了

---

1.gulp的安裝

• gulp安裝前的環境配置
  • 安裝gulp的前提是你已經經有了nodejs的運行環境，
  • 查看是否安裝了nodejs,若是輸出版本號，說明已經安裝了node

  node -v

  • 若是沒有安裝node，就去官網下載一下安裝便可node官方網站
• 以上步驟完成以後，先初始化一下npm init,而後再全局安裝gulp

npm install -g gulp-cli

• 全局安裝gulp後，還須要在每一個要使用gulp的項目中都單獨安裝一次。把目錄切換到你的項目文件夾中，而後在命令行中執行：

npm install gulp --save-dev

解釋一下：--save-dev是package.json文件中的依賴，最好加上

---

2.使用gulp

• 安裝完以後就是如何使用了，先在你這個目錄下新建一個gulpfile.js的文件，裏面寫咱們定義的任務，例如如下代碼是對less轉換爲css的
  注意：你能夠本身起一個任務名，運行的時候，直接在命令行輸入gulp 任務名，gulp也給咱們定義了一個默認任務名default,若是任務名爲
  default,直接在命令行輸入gulp便可

先引入包
const gulp = require('gulp')   //這個每次都要引入，在你使用插件的時候
const less = require('gulp-less')

// 定義任務對less進行轉換,myless是你本身定義的任務名
gulp.task('myless', function() {
  // 1.匹配到要處理的文件，目錄src/less/*.less下的全部後綴名爲`.less`的全部文件
  gulp.src('src/less/*.less')
    // 2.對less語法進行轉換!
    .pipe(less())
    // 3.指定文件的輸出目錄dist/css
    .pipe(gulp.dest('dist/css'))
})

---

3.gulp經常使用的插件

3.1 轉換less語法

安裝npm install gulp-less --save-dev

const less = require('gulp-less')

// 定義任務對less進行轉換,myless是你本身定義的任務名
gulp.task('myless', function() {
  // 1.匹配到要處理的文件，目錄src/less/*.less下的全部後綴名爲`.less`的全部文件
  gulp.src('src/less/*.less')
    // 2.對less語法進行轉換!
    .pipe(less())
    // 3.指定文件的輸出目錄dist/css
    .pipe(gulp.dest('dist/css'))
})

3.2 對 js 語法進行壓縮和混淆

安裝npm install gulp-uglify --save-dev

const uglify = require('gulp-uglify')

// 對js請求進行壓縮和混淆
// 定義任務
gulp.task('myscript', function() {
  // 1.匹配要處理的文件
  gulp.src('src/js/*.js')
      // 2.將js代碼壓縮混淆
       .pipe(uglify())
       .pipe(gulp.dest('dist/js'))
})

3.3 對html代碼進行壓縮

安裝npm install gulp-htmlmin --save-dev

// 對html進行壓縮的包
const htmlmin = require('gulp-htmlmin')

// 對html進行壓縮
// 定義任務
gulp.task('myhtml', function(){
   // 1.匹配到要處理的html文件
   gulp.src('src/*.html')
        // 2.對html進行壓縮!
        .pipe(htmlmin({
          collapseWhitespace:true // 去除空白符
          }))
          // 3.輸出
        .pipe(gulp.dest('dist'))
})

3.4 對css進行壓縮

安裝 npm install gulp-cssnano --save-dev

const cssnano = require('gulp-cssnano')


// 定義任務
gulp.task('mycss', function(){
     // 1.
     gulp.src('src/css/*.css')
     .pipe(cssnano())// 消化，轉換，壓縮
     .pipe(gulp.dest('dist/css'))
})

---

4.gulp的API

• gulp.task
  • 做用：定義一個任務:
  • 示例:

    • gulp.task('任務名', function(){
           // 任務內容
        })

  • 執行: 在命令行,gulpfile.js所在目錄執行 gulp 任務名
• gulp.src
  • 做用: 匹配到咱們想要處理的文件!
  • 示例：

    • gulp.task('任務名', function(){
            // 如: './style.less'
            // 如: './*.less'
            // 如: '*.*' // 當前目錄的下全部文件!
            // 如: **/*.* // 當前目錄全部目錄下的全部文件
            這個參數還能夠是一個數組
            gulp.src(['./stlyle.less','./test.less','*.*'])
            gulp.src('路徑字符串')
            .pipe(less()) // 語法轉換
            .pipe(gulp.dest('文件輸出目錄'))
            })

• gulp.dest('文件輸出目錄')

• gulp.watch
  • 做用：** 監視文件變化而後自動執行相應的任務!,不用每次都要敲命令**

  // 咱們還自動監視文件變化，而後執行相應任務
  gulp.task('mywatch', function(){
  // 監視指定文件的變化，若是變化就執行相應的任務!
   gulp.watch('src/**/*.*',['mycss','myhtml','myscript','myless'])
  })

  注意：這裏輸入的命令行的代碼是gulp 任務名，在上面的代碼中是gulp mywatch,千萬不要和webpack混淆了

• gulp.run

// 咱們能夠新建一個任務，用這個任務去啓動其餘任務!
// 若是在命令行輸入gulp 會直接執行當前目錄的名爲default的任務
gulp.task('default' ,function(){
  //console.log(1111)
  // run方法是用來執行其餘任務
  // 參數是任務名,若是寫成數組形式，那麼數組中的元素就是要執行的任務名
  
  gulp.run(['mycss','myhtml','myscript','myless'])
})

假設你有好多文件須要打包，這樣作的目的是爲了你輸入命令的時候，不用再輸入好多文件名來執行了，直接輸入gulp,就是新建一個任務default，用這個任務去啓動其餘任務

在gulp中也可使用browser-sync

• 須要在當前項目目錄安裝:npm install browser-sync --save-dev
  這時候想把gulp和browser-sync合成一個命令，只能是把browser的命令省掉，用gulp來代替，那麼命令省掉了，最終就要換成代碼，以下所示

//啓動boswerSync服務
       browserSync.init({
       server:"./src", //指定網站目錄，訪問時不須要 ，就是幫你自動刷新瀏覽器http://localhost:3000/後面
       //的目錄，能夠省略不寫,*這裏的路徑必定要寫對*
        files:["./src/**/*.*"]
           })

和watch合起來的代碼：

//這個broserSync是自動幫你刷新瀏覽器
const browserSync = require('browser-sync')

//咱們還自動監視文件變化，而後執行相應任務
gulp.task("mywatch",function(){
  //啓動boswerSync服務
       browserSync.init({
       server:"./src", //指定網站目錄，訪問時不須要 
       //輸入這個目錄(網站根目錄就是端口號後面的目錄的父級)
        files:["./src/**/*.*"]
           })
//    監視指定文件的變化，若是變化就自動執行相應的任務（想監視誰，就在數組裏寫誰）
   gulp.watch('src/**/*.*',['myless'])
  })

注意:若是更改了gulpfile.js文件要重啓咱們的任務!