使用 gulp 搭建前端環境入門篇

使用gulp搭建前端環境入門篇

1. gulp 入門基礎

2. 配置常用插件

3. ES6 代碼轉化

4. 完整演示示例

5. 參考文檔

原文鏈接

gulp 入門基礎

1.全局安裝gulp：

$ npm install --global gulp

2.作為項目的開發依賴 (devDependencies)

$ npm install --save-dev gulp

3.在項目根目錄下面創建一個名為gulpfile.js的文件：

$ touch gulpfile.js
// 配置 gulp 的相關任務

4.運行 gulp：

$ gulp

配置常用插件

下面的步驟從零開始動手搭建環境

1.檢查你的 node 版本和 gulp 版本

node -v 
//  => v4.0.0

gulp -v
//  => CLI version 3.9.0
//  => Local version 3.9.0

2.安裝常用 插件

初始化項目目錄

$ mkdir ES6-with-gulp-babe && cd ES6-with-gulp-babe && git init && npm init

注： 使用 npm init 創建一個 package.json 存儲依賴關系等配置信息

安裝依賴插件

$ npm install --save-dev gulp gulp-sass gulp-autoprefixer browser-sync gulp-notify

上述命名依次安裝了gulp、gulp-sass、gulp-autoprefixer、browser-sync、gulp-notify等常用插件，其中：

• gulp-sass用于將 Sass 文件編譯為 CSS 文件

  </li>

• gulp-autoprefixer根據瀏覽器版本自動處理添加瀏覽器前綴

  </li>

• browser-sync能讓瀏覽器實時、快速響應文件更改（html、js、css、sass、less等）并自動刷新頁面

  </li>

• gulp-notify用于任務提醒

  </li> </ul>

  3.創建gulp的配置文件gulpfile.js

  以browser-sync為例來配置gulpfile.js文件

  // 加載插件
  var gulp        = require('gulp');
  var browserSync = require('browser-sync').create();
  
  // 靜態服務器 + 監聽 scss/html 文件
  gulp.task('serve', ['sass'], function() {
  
  browserSync.init({
      server: "./app"
  });
  
  gulp.watch("app/scss/*.scss", ['sass']);
  gulp.watch("app/*.html").on('change', browserSync.reload;);
  
  });</pre> 
  4. Browsersync 可以同時在PC、平板、手機等設備下進項調試 
  
  ES6 代碼轉化 
  
  使用ES6的語法重寫gulpfile.js, 在最新的gulp 3.9版本上，開發者可以使用ES6語法來編寫配置文件,但是需要安裝babel來轉化ES6代碼 
  
  第一步：安裝babel 
  
  npm install babel-core babel-preset-es2015 --save-dev
   
  第二步：在根目錄下創建.babelrc配置文件 
  
  touch .babelrc
   
  并添加以下內容： 
  
  {
    "presets": ["es2015"]
  }
   
  注：.babelrc為babel的配置文件，保存在項目的根目錄下，其中presets用于設置開啟的語法特性集合，詳細介紹可參考官方文檔： https://babeljs.io/docs/usage/babelrc/ 和 http://babeljs.io/docs/plugins/#presets 
  
  第三步：將gulpfile.js重名為gulpfile.babel.js 
  
  mv "gulpfile.js" "gulpfile.babel.js"
   
  第四步：現在我們就可以使用ES6的語法重寫gulp的配置文件 
  
  'use strict';
  
  import babel from 'gulp-babel';
  gulp.task('babel',() => {
    gulp.src('src/app.js')
      .pipe(babel())
      .pipe(gulp.dest('dist'))
      .pipe(notify({ message: 'babel task complete' }));
  })</pre> 
  完整演示示例 
  
  1.安裝 
  
  
  
  Clone the repo 
  </li>
  
  
  npm install -g gulpto install Gulp globally. 
  </li>
  
  
  npm installto resolve project dependencies. 
  </li>
  </ul>
  
  2.使用 
  
  
  
  Rungulp 
  </li>
  </ul>
  
  參考文檔 
  
  
  
  Gulp 開發教程 
  
  
  Gulp：任務自動管理工具 
  
  
  Using ES6 with gulp 
  
  
  Browsersync 
  
  
  Gulp getting started