Gulp--手把手教你搭建前端自動化平臺

前端的發展真的是快，前幾年仍是刀耕火種的開個編輯器，幾行html和js代碼就能上瀏覽器跑了。如今呢？各類包，各類庫，各類框架，各類編程範式。究其緣由，就是咱們高中社會課本中那句話

人民日益增加的文質文化需求，同落後的社會生產之間的矛盾

想一想也是，之前刀耕火種的編寫頁面效率很是低，而我國到目前爲止網民的數量已經超過7億了，可想而知對網頁數量和多樣化的需求巨大，那有什麼方法來提升頁面的生產效率呢？這就是我今天要講的基於gulp平臺的自動化生產平臺。
gulp是啥？官方的解釋是基於流的自動化構建工具。好，那什麼是流呢？這個流是從英語單詞stream翻譯過來的，不過仍是很差理解。其實能夠這麼理解，流就是工廠的一個生產車間生產出來的半成品，一個個半成品在輸送帶上送往下一個加工車間的過程。把運動的半成品當作是數據，那麼流動的數據就是流。唉！好難解釋啊！仍是看代碼吧。我已經把代碼上傳到github了，須要的同窗自取，麻煩點個小星星 https://github.com/NicknameID...

1.依賴npm

因爲npm在國內比較慢，因此推薦你們使用淘寶的cnpm，在國內訪問比較快（搞不懂國家爲何立堵牆，難受）。

2.cnpm init 初始化package.json文件

• -y的做用能夠跳過詢問步驟直接生成默認的package.json文件
  

3.安裝依賴包

因爲依賴包太多了，就不一個一個寫了 主要經過 cnpm install --save-dev 包的名字的方式來安裝的，
下圖所列的就是自動化工具要用的包，我已經上傳到github上了點擊這裏獲取，
下載後只要 cnpm install就能夠了，就會根據package.json裏的依賴去下載安裝

在package.json中添加gulp字段方便調用本地安裝的gulp命令,到這裏package.json配置好了

4.gulpfile.js文件的內容（重點）

• 功能1---自動化生成項目目錄

//gulpfile.js
/*首先在全局上加載gulp，這個很重要*/
const gulp = require('gulp');
/*在全局上定義項目的目錄結構，供應後面使用*/
const dirs = {
  dist:'./dist',
  src: './src',
  css: './src/css',
  less: './src/less',
  js: './src/js',
  img: './src/img',
};
gulp.task('create-directory', () => {
  const mkdirp = require('mkdirp'); //這裏要依賴mkdirp這個包，經過cnpm 安裝
  for (let i in dirs) {
    mkdirp(dirs[i], err => {
      err ? console.log(err) : console.log('mkdir-->' + dirs[i]);;
    });
  }
});
//在終端運行cnpm run gulp create-directory

生成須要生成的項目目錄，不再用每次都去手工建立了，幸福感爆棚有木有！！！

• 功能2---編譯less，而且實現less注入功能，熱更新頁面，方便開發時調試
  這個功能要依賴的插件有

1.gulp-less
2.browser-sync
3.gulp-notify
4.gulp-plumber

/*全局定義要處理的文件*/
const files = {
  lessFiles: './src/less/go.less',
  cssFiles: './src/css/*.css',
  jsFiles: './src/js/*.js',
  imgFiles:'./src/img/*.*'
}
//編譯less
gulp.task('compile-less', () => {
const less = require('gulp-less'); //依賴gulp-less的插件
const notify = require('gulp-notify'); 
const plumber = require('gulp-plumber');
const browserSync = require('browser-sync').create(); //browser-sync同步服務器
const reload = browserSync.reload; //將browser-sync的reload方法存起來，方便調用
  return gulp.src(files.lessFiles)
  .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })) //使用gulp-notify和gulp-plumber用來阻止由於less語法寫錯跳出監視程序發生
  .pipe(less())
  .pipe(gulp.dest(dirs.css + '/'))
  .pipe(reload({stream: true}));
});

// 本地服務器功能，自動刷新（開發環境）
gulp.task('server', ['compile-less'],()=>{
const browserSync = require('browser-sync').create();
const reload = browserSync.reload;
  browserSync.init({
    server: './'
  });
  gulp.watch(dirs.less+'/**/*.less', ['compile-less']); //監視less文件夾中的全部less文件，有改動就調用compile-less任務編譯less
  gulp.watch('./*.html').on('change', reload); //監視html文件，有改動就刷新瀏覽器
  gulp.watch(dirs.js+'/**/*.js').on('change', reload); //監視全部js文件有改動就刷新瀏覽器
});
//在cmd運行cnpm run gulp server

能夠看到程序正在後臺運行，正在監聽文件改動

這樣就能夠左邊開着編輯器寫代碼，右邊開着瀏覽器看效果了，有木有很爽，人生別無他求了（感動中！！！）

• 功能3---添加瀏覽器私有前綴
  要用到的插件包

1.gulp-postcss
2.gulp-sourcemaps
3.autoprefixer

//添加瀏覽器私有前綴（生產環境）
gulp.task('autoprefixer', () => {
  const postcss = require('gulp-postcss');
  const sourcemaps = require('gulp-sourcemaps');
  const autoprefixer = require('autoprefixer');
  return gulp.src(files.cssFiles)
    .pipe(sourcemaps.init()) //添加sourcemap,方便調試
    .pipe(postcss([ autoprefixer() ])) //添加瀏覽器私有前綴，解決瀏覽器的兼容問題
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(dirs.css+'/'))
});

• 功能4---壓縮css
  要用到的插件包

1.gulp-minify-css
2.gulp-rename

// 壓縮css(生產環境)
gulp.task('minify-css', function () {
  const minifyCSS = require('gulp-minify-css');
  const rename = require("gulp-rename");
  return gulp.src(dirs.css+'/**/*.css')
    .pipe(minifyCSS({/*keepBreaks: true*/}))
    .pipe(rename(path=>path.basename += '.min')) //重命名文件輸出後的樣式爲 原文件名.min.css
    .pipe(gulp.dest('./dist/css/'))
});

• 功能5---合併壓縮JavaScript文件
  要用到的插件包

1.gulp-concat
2.gulp-uglify
3.gulp-rename

// js文件--合併--壓縮(生產環境)
gulp.task('js-concat-compress', (cb)=>{
  let name = ''; //先定義一個變量將用於後面存文件名
  const concat = require('gulp-concat');
  const uglify = require('gulp-uglify');
  const rename = require("gulp-rename");
  return gulp.src(dirs.js+'/**/*.js')
  .pipe(rename(path=>{path.basename += '';name=path.basename;}))
  .pipe(concat('bundle.js'))   //合併js文件
  .pipe(uglify())         //壓縮js文件
  .pipe(rename(path=>{
    path.basename = name+'.'+path.basename+'.min';  //改文件名加上 .min
  }))
  .pipe(gulp.dest('dist/js/')); 
});

• 功能6---圖片無損壓縮
  要用到的插件包

1.gulp-imagemin

// 圖片無損壓縮
gulp.task('img-handl',()=>{
  const imagemin = require('gulp-imagemin');
  return gulp.src(files.imgFiles)
    .pipe(imagemin())  //imagemin()裏是能夠寫參數的，有須要的能夠去github的頁面看看
    .pipe(gulp.dest('./dist/img/'))
});

• 功能7---項目的打包
  有時候咱們作完東西須要打包，方便傳輸，而有些文件又是不須要打包進去的，好比說node_modules文件夾，一鍵打包的快感體驗過絕對會愛上的

依賴的插件包
1.gulp-zip

// 項目打包(生產環境)
gulp.task('zip',()=>{
  const zip = require('gulp-zip');
  return gulp.src(['./*.html','**/dist/**/*.*','!**/node_modules/**/*.*']) //這裏須要注意的是，在寫要打包的文件時，避免打包的文件不能寫在開頭，這裏'!**/node_modules/**/*.*'放在了最後
  .pipe(zip('project.zip'))   //打包後的文件名，本身隨意取
  .pipe(gulp.dest('./'))
});

5.整理任務執行，方便調用任務

由於gulp執行任務時是以最大的任務併發數同時進行的，因此有時候咱們須要按步驟進行，就須要插件gulp-sequence，將任務按順序寫入，就會按順序執行
寫了這麼多功能模塊，須要好好的整理一下，方便調用。我已經把完整的代碼上傳到github了，須要的同窗自取，麻煩點個小星星 https://github.com/NicknameID...

// ------------------開發階段命令----------------------------------------------------
gulp.task('start', ['create-directory']); //項目初始化的第一個命令
gulp.task('dev-watch', ['server']); //開始編寫項目後開啓服務器實時更新

// ------------------生產階段命令------------------------------------------------------
gulp.task('prefixer', ['autoprefixer']); //給css文件添加瀏覽器私有前綴 files.cssFiles ==>> .src/css/
gulp.task('min-css', ['minify-css']); //壓縮css文件 files.cssFiles ==>> dist/css/
gulp.task('js-handl', ['js-concat-compress']); //合js文件  dirs.js/**/*.js ==>> ./dist/js/concated.js
gulp.task('img-handl', ['img-handl']) //處理圖片，對圖片進行無損的壓縮

//----------------一鍵生成項目文件命令-----------------------------------------------
       //由於gulp執行任務時是以最大的任務併發數同時進行的，因此有時候咱們須要按步驟進行，就須要插件`gulp-sequence`，將任務按順序寫入，就會按順序執行
const runSequence = require('gulp-sequence').use(gulp);
gulp.task('bunld-project',runSequence('clean-dist','compile-less','autoprefixer','minify-css','js-concat-compress','img-handl','zip'))

6.小結

看到沒有，使用gulp其實並無用到不少自己的API，都是經過不一樣的插件來實現的處理過程，因此gulp更加像一個處理平臺，而非大包大攬的處理程序，他只負責數據的流向，從pipe(管道)的這頭流向另一頭，剩下的事情就交給各個插件了，像不像現代社會的細化分工。分工明確才能提升效率，這是社會發展的經驗總結。文章有點長，感謝看完的小夥伴！！！