使用 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 文件

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

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

• gulp-notify 用於任務提醒

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;);
});

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' }));
})

完整演示示例

1.安裝

• Clone the repo

• npm install -g gulp to install Gulp globally.

• npm install to resolve project dependencies.

2.使用

• Run gulp

參考文檔

1. Gulp 開發教程

2. Gulp：任務自動管理工具

3. Using ES6 with gulp

4. Browsersync

5. Gulp getting started