Gulp 自動化你的前端

時間  2019-12-12
標籤 gulp 自動化 前端 欄目 JavaScript 简体版
原文   原文鏈接

前端（段子）界的發展日新月異，總感受隨時會跟不上技術潮流（其實我已經被甩開了一條街，so sadjavascript

選擇在這樣一個時機發布一篇 gulp 教程並非個人初衷，第一次用 gulp 是在一年前，而這篇帖子在草稿箱裏躺了一個多月，再不發出來講不定就過期了。css

當我在用 gulp 時我用它作什麼？html

  1. 編譯 sass
  2. 合併優化壓縮 css
  3. 校驗壓縮 js
  4. 優化圖片
  5. 添加文件指紋（md5）
  6. 組件化頭部底部（include html）
  7. 實時自動刷新…

總之，gulp是前端開發過程當中對代碼進行自動化構建的利器。它不只能對資源進行優化，並且在開發過程當中可以經過配置自動完成不少重複的任務，讓咱們能夠專一於代碼，提升工做效率。前端

然而因爲衆所周知的緣由，國內到 npm 服務器的鏈接很不穩定，若是你有V了個PN大可沒必要擔憂，也可經過設置 npm 代理服務器的方式訪問：java

「這是一個完整 npmjs.org 鏡像，你能夠用此代替官方版本(只讀)，同步頻率目前爲 10分鐘 一次以保證儘可能與官方服務同步。」 —— 淘寶團隊點贊node

npm config set registry="https://registry.npm.taobao.org"
npm config set disturl https://npm.taobao.org/dist

接下來開始 gulp 教程：

準備工做： 安裝 node.js （推薦 TLS 版），並重啓系統。jquery

1. 全局安裝 gulp

npm install gulp -g

2. 目錄結構：

└── src/            源碼目錄npm

├── build/   .html 組件
├── sass/     .scss .sass 文件
├── css/       .css 文件
├── js/         .js 文件
└── img/     圖片json

└── dist/        輸出目錄
└── package.json
└── gulpfile.jsgulp

3. 關於 package.json

能夠在項目上使用 npm init 配置，推薦直接新建並寫入初始內容：

{
  "name": "gulp-build",
  "version": "1.0.0",
  "description": "Gulp.js",
  "private": true
}

　

對於完整的 package.json (好比別人的開源項目), 只需對整個項目執行 npm install 便可安裝 package.json 文件中聲明的全部插件模塊。

4. 給項目目錄安裝 gulp

npm install gulp --save-dev

　　—save-dev 這個參數會將插件信息自動更新到 package.json 裏，其中的 devDependencies 屬性會隨插件依賴的安裝卸載而改變。

PS. Windows 7及以上，按住 Shift 再右鍵，選擇在此處打開命令窗口。免去 cd 命令定位目錄的煩惱。

5. 給項目目錄安裝經常使用的插件

PS.可與上一步同時進行

npm install gulp del gulp-cached gulp-uglify gulp-rename gulp-concat gulp-notify gulp-filter gulp-jshint gulp-ruby-sass gulp-rev-append gulp-cssnano gulp-replace gulp-imagemin browser-sync gulp-font-spider gulp-file-include gulp-autoprefixer --save-dev

插件將在配置文件裏介紹，更多用法請參見相應的 GitHub 主頁，或者直接戳這裏： https://www.npmjs.com/package/

以上兩個安裝操做將會在項目目錄下生成 node_modules 文件夾，相應的插件都在這裏。

Windows 用戶請注意，此文件夾可能 沒法刪除 沒法複製 沒法移動，會出現諸如「包含名稱過長且沒法放入回收站」，「源文件名長度大於文件系統支持的長度。請嘗試將其移動到具備較短路徑名稱的位置」 等等問題。使用一個簡單的方式便可刪除，使用 WinRAR 「添加到壓縮文件」，勾選壓縮選項裏的 「壓縮後刪除源文件」 ，肯定以後便可刪除。

6. API

別看我，看它：http://www.gulpjs.com.cn/docs/api/

7. 代碼示例

src/build/header.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>嘿嘿嘿</title>
<link href="css/m.base.css?rev=@@hash" rel="stylesheet" type="text/css" />
<link href="css/jquery.fullPage.css?rev=@@hash" rel="stylesheet" type="text/css" />
<link href="css/mobile.css?rev=@@hash" rel="stylesheet" type="text/css" />
</head>
<body>

src/build/footer.html

<!-- common js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/main.js?rev=@@hash"></script>
</body>
</html>

src/index.html

@@include('build/header.html')
 
<div class="wrap">內容</div>
 
@@include('build/footer.html')

代碼中， ?rev=@@hash  是 gulp-rev-append 插件的指紋標識
@@include(‘build/header.html’) 能夠插入 html 文件，還能夠配合參數生成獨立的頭部。

8. 個人 gulpfile.js，配置及說明

gulpfile.js

/*!
 * gulp
 * $ npm install gulp gulp-ruby-sass gulp-cached gulp-uglify gulp-rename gulp-concat gulp-notify gulp-filter gulp-jshint gulp-rev-append gulp-cssnano gulp-imagemin browser-sync gulp-file-include gulp-autoprefixer del --save-dev
 */
 
// Load plugins
var gulp = require('gulp'), // 必須先引入gulp插件
    del = require('del'),  // 文件刪除
    sass = require('gulp-ruby-sass'), // sass 編譯
    cached = require('gulp-cached'), // 緩存當前任務中的文件，只讓已修改的文件經過管道
    uglify = require('gulp-uglify'), // js 壓縮
    rename = require('gulp-rename'), // 重命名
    concat = require('gulp-concat'), // 合併文件
    notify = require('gulp-notify'), // 至關於 console.log()
    filter = require('gulp-filter'), // 過濾篩選指定文件
    jshint = require('gulp-jshint'), // js 語法校驗
    rev = require('gulp-rev-append'), // 插入文件指紋（MD5）
    cssnano = require('gulp-cssnano'), // CSS 壓縮
    imagemin = require('gulp-imagemin'), // 圖片優化
    browserSync = require('browser-sync'), // 保存自動刷新
    fileinclude = require('gulp-file-include'), // 能夠 include html 文件
    autoprefixer = require('gulp-autoprefixer'); // 添加 CSS 瀏覽器前綴
 
// sass
gulp.task('sass', function() {
  return sass('src/sass/**/*.scss', {style: 'expanded'})  // 傳入 sass 目錄及子目錄下的全部 .scss 文件生成文件流經過管道並設置輸出格式
    .pipe(cached('sass'))  // 緩存傳入文件，只讓已修改的文件經過管道（第一次執行是所有經過，由於尚未記錄緩存）
    .pipe(autoprefixer('last 6 version')) // 添加 CSS 瀏覽器前綴，兼容最新的5個版本
    .pipe(gulp.dest('dist/css')) // 輸出到 dist/css 目錄下（不影響此時管道里的文件流）
    .pipe(rename({suffix: '.min'})) // 對管道里的文件流添加 .min 的重命名
    .pipe(cssnano()) // 壓縮 CSS
    .pipe(gulp.dest('dist/css')) // 輸出到 dist/css 目錄下，此時每一個文件都有壓縮（*.min.css）和未壓縮(*.css)兩個版本
});
 
// css （拷貝 *.min.css，常規 CSS 則輸出壓縮與未壓縮兩個版本）
gulp.task('css', function() {
  return gulp.src('src/css/**/*.css')
    .pipe(cached('css'))
    .pipe(gulp.dest('dist/css')) // 把管道里的全部文件輸出到 dist/css 目錄
    .pipe(filter(['**/*', '!**/*.min.css'])) // 篩選出管道中的非 *.min.css 文件
    .pipe(autoprefixer('last 6 version'))
    .pipe(gulp.dest('dist/css')) // 把處理過的 css 輸出到 dist/css 目錄
    .pipe(rename({suffix: '.min'}))
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css'))
});
 
// styleReload （結合 watch 任務，無刷新CSS注入）
gulp.task('styleReload', ['sass', 'css'], function() {
  return gulp.src(['dist/css/**/*.css'])
    .pipe(cached('style'))
    .pipe(browserSync.reload({stream: true})); // 使用無刷新 browserSync 注入 CSS
});
 
// script （拷貝 *.min.js，常規 js 則輸出壓縮與未壓縮兩個版本）
gulp.task('script', function() {
  return gulp.src(['src/js/**/*.js'])
    .pipe(cached('script'))
    .pipe(gulp.dest('dist/js'))
    .pipe(filter(['**/*', '!**/*.min.js'])) // 篩選出管道中的非 *.min.js 文件
    // .pipe(jshint('.jshintrc')) // js的校驗與合併，根據須要開啓
    // .pipe(jshint.reporter('default'))
    // .pipe(concat('main.js'))
    // .pipe(gulp.dest('dist/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
});
 
// image
gulp.task('image', function() {
  return gulp.src('src/img/**/*.{jpg,jpeg,png,gif}')
    .pipe(cached('image'))
    .pipe(imagemin({optimizationLevel: 3, progressive: true, interlaced: true, multipass: true}))
    // 取值範圍：0-7（優化等級）,是否無損壓縮jpg圖片，是否隔行掃描gif進行渲染，是否屢次優化svg直到徹底優化
    .pipe(gulp.dest('dist/img'))
});
 
// html 編譯 html 文件並複製字體
gulp.task('html', function () {
  return gulp.src('src/*.html')
    .pipe(fileinclude()) // include html
    .pipe(rev()) // 生成並插入 MD5
    .pipe(gulp.dest('dist/'))
});
 
// clean 清空 dist 目錄
gulp.task('clean', function() {
  return del('dist/**/*');
});
 
// build，關連執行所有編譯任務
gulp.task('build', ['sass', 'css', 'script', 'image'], function () {
  gulp.start('html');
});
 
// default 默認任務，依賴清空任務
gulp.task('default', ['clean'], function() {
  gulp.start('build');
});
 
// watch 開啓本地服務器並監聽
gulp.task('watch', function() {
  browserSync.init({
    server: {
      baseDir: 'dist' // 在 dist 目錄下啓動本地服務器環境，自動啓動默認瀏覽器
    }
  });
 
  // 監控 SASS 文件，有變更則執行CSS注入
  gulp.watch('src/sass/**/*.scss', ['styleReload']);
  // 監控 CSS 文件，有變更則執行CSS注入
  gulp.watch('src/css/**/*.css', ['styleReload']);
  // 監控 js 文件，有變更則執行 script 任務
  gulp.watch('src/js/**/*.js', ['script']);
  // 監控圖片文件，有變更則執行 image 任務
  gulp.watch('src/img/**/*', ['image']);
  // 監控 html 文件，有變更則執行 html 任務
  gulp.watch('src/**/*.html', ['html']);
  // 監控 dist 目錄下除 css 目錄之外的變更（如js，圖片等），則自動刷新頁面
  gulp.watch(['dist/**/*', '!dist/css/**/*']).on('change', browserSync.reload);
 
});

9. 使用 gulp 的方法

執行gulp任務

gulp taskname // 如 gulp sass，不指定 taskname 則默認執行 default 任務

 

原文地址：https://www.sheyilin.com/2016/02/gulp_introduce/

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程