NodeJS+Express搭建我的博客-gulp自動化構建工具使用（二）

gulp自動化構建工具使用

簡言

如今無論是作前端仍是後端的，不可避免的是要跟html打交道的；並且Node這麼容易開發web；難道咱們不想本身隨手寫點什麼？Express這類比較前衛的框架；早就深度集成了不少前端的東西；如今，就讓咱們手動爲thinkphp也插上gulp的翅膀吧。

構建

第一步

在本身的thinkphp項目根目錄中建立 package.json;加上如下依賴

{
  "name": "baijunyao/thinkphp-bjyadmin",
  "version": "1.0.0",
  "description": "WebLSS博客",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "WebLSS",
    "博客"
  ],
  "author": "baijunyao",
  "license": "Apache2",
  "devDependencies": {
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-2": "^6.18.0",
    "browser-sync": "^2.14.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-cleanhtml": "^1.0.1",
    "gulp-concat": "^2.6.0",
    "gulp-contrib-copy": "^0.1.2",
    "gulp-decomment": "^0.1.3",
    "gulp-imagemin": "^3.0.2",
    "gulp-less": "^3.1.0",
    "gulp-load-plugins": "^1.2.4",
    "gulp-minify-css": "^1.2.4",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.2",
    "gulp-uglify": "^2.0.0"
  }
}

第二步

建立gulpfile.js文件

/**
 *  Created by WebLss on 2018/8/3
 */
var gulp = require('gulp')
var sass = require('gulp-sass')
var minifyCss = require('gulp-minify-css')
var plumber = require('gulp-plumber')
var babel = require('gulp-babel')
var uglify = require('gulp-uglify')
var clearnHtml = require('gulp-cleanhtml')
var imagemin = require('gulp-imagemin')
var copy = require('gulp-contrib-copy')
var browserSync = require('browser-sync').create()
var reload = browserSync.reload
// 定義源代碼的目錄和編譯壓縮後的目錄
var src = 'public/src'
var dist = 'public/dist'
var viewSrc = 'views/src'
var viewDist = 'views/dist'
// 編譯所有scss 並壓縮
gulp.task('css', function () {
  gulp.src(src + '/**/*.scss')
    .pipe(sass())
    .pipe(minifyCss())
    .pipe(gulp.dest(dist))
})
// 編譯所有js 並壓縮
gulp.task('js', function () {
  gulp.src(src + '/**/*.js')
    .pipe(plumber())
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest(dist))
})
// 壓縮所有html
gulp.task('html', function () {
  gulp.src(src + '/**/*.+(html|ejs)')
    .pipe(clearnHtml())
    .pipe(gulp.dest(dist))
  // 編譯視圖文件
  gulp.src(viewSrc + '/**/*.+(html|ejs)')
    .pipe(clearnHtml())
    .pipe(gulp.dest(viewDist))
})
// 壓縮所有image
gulp.task('image', function () {
  gulp.src([src + '/**/*.+(jpg|jpeg|png|gif|bmp)'])
    .pipe(imagemin())
    .pipe(gulp.dest(dist))
})
// 其餘不編譯的文件直接copy
gulp.task('copy', function () {
  gulp.src(src + '/**/*.!(jpg|jpeg|png|gif|bmp|scss|js|html|ejs)')
    .pipe(copy())
    .pipe(gulp.dest(dist))
})
// 自動刷新
gulp.task('server', function () {
  browserSync.init({
    proxy: 'veekergdn.com', // 指定代理url
    notify: false // 刷新不彈出提示
  })
  // 監聽scss文件編譯
  gulp.watch(src + '/**/*.scss', ['css'])
  // 監聽其餘不編譯的文件 有變化直接copy
  gulp.watch(src + '/**/*.!(jpg|jpeg|png|gif|bmp|scss|js|html)', ['copy'])
  // 監聽html文件變化後刷新頁面
  gulp.watch(src + '/**/*.js', ['js']).on('change', reload)
  // 監聽html文件變化後刷新頁面
  gulp.watch(src + '/**/*.+(html|ejs)', ['html']).on('change', reload)
  // 監聽css文件變化後刷新頁面
  gulp.watch(dist + '/**/*.css').on('change', reload)
})
// 監聽事件
gulp.task('default', ['css', 'js', 'image', 'html', 'copy', 'server'])

把 gulpfile.js 中的src 和 dist 變量替換爲本身項目的實際目錄；
把proxy 替換爲本身的本地自定義域名；
第三步： 命令行運行以下命令：

安裝各類包

cnpm install 或npm install

運行gulp

gulp
若是不出意外；會自動編譯並打開瀏覽器了；
很簡單吧；就3步；
以項目爲例講解下吧： https://github.com/WebLss/Nod...
運行gulp後；會有以下操做；

1.src目錄下的圖片、文件、html、scss都會編譯到view_dist目錄
2.能夠手動設置開發階段使用src/dist目錄的html頁面，`product`和`development`
兩個狀態切換
3.觸發監放任務，有文件變更自動執行上述幾條任務，而且自動刷新瀏覽器，
這又是一個一次整合終身受益，不止是終身；換個項目一樣能夠很方便複用；

意義

估計你們也都看出來了，爲何要用gulp編譯壓縮，無非就是有效利用空間資源，優化加載速度，優化網站性能，提高用戶體驗感