day34 gulp

day34 gulp

1. Gulp簡介

• gulp是前端開發過程當中對代碼進行構建的工具，是自動化項目的構建利器；她不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成；使用她，咱們不只能夠很愉快的編寫代碼，並且大大提升咱們的工做效率。
• gulp是基於Nodejs的自動任務運行器，她能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，她借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。
• gulp 和grunt 很是相似，但相比於 grunt 的頻繁 IO 操做，gulp 的流操做，能更快地更便捷地完成構建工做。

2. Gulp環境搭建

1）安裝nodeJs

• 說明：gulp是基於nodejs，理所固然須要安裝nodejs
• 安裝：打開nodejs官網（https://nodejs.org/en/），點擊碩大的綠色Download按鈕，它會根據系統信息選擇對應版本（.msi文件）
• 測試：按window + r 輸入cmd回車，而後輸入npm -v
• 確保已經配置到了環境變量， 這樣你就能夠在全局範圍內去使用它了
• 若是想了解環境變量：進入如下地址：https://blog.csdn.net/jiang77...

• npm的解釋：

  • npm是Node.js的包管理工具（package manager）
  • 在Node.js上開發時，會用到不少別人寫的JavaScript代碼。若是須要使用別人寫的某個包，每次都根據名稱搜索一下官方網站，下載代碼，解壓，再使用，很是繁瑣。因而一個集中管理的工具應運而生：你們都把本身開發的模塊打包後放到npm官網上，若是要使用，直接經過npm安裝就能夠直接用，不用管代碼存在哪，應該從哪下載。
  • 更重要的是，若是咱們要使用模塊A，而模塊A又依賴於模塊B，模塊B又依賴於模塊X和模塊Y，npm能夠根據依賴關係，把全部依賴的包都下載下來並管理起來。不然，靠咱們本身手動管理，確定既麻煩又容易出錯。

2）安裝 cnpm

• 由於npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常;
• 若是npm的服務器在中國就行了，因此咱們樂於分享的淘寶團隊幹了這事。網址：http://npm.taobao.org

• 安裝：

  • cmd(命令行) 執行：

    • npm install cnpm -g --registry=https://registry.npm.taobao.org
    • cnpm -v 測試是否安裝成功
• 注意：cnpm跟npm用法徹底一致，只是在執行命令時將npm改成cnpm（如下操做將以cnpm代替npm）

3) 全局安裝gulp

• cmd命令： cnpm install gulp -g
• gulp -v， 出現版本號即爲正確安裝
• 全局安裝gulp的目的是：可使用gulp命令（就跟使用npm的命令同樣）

4) gulp在項目中如何使用 （新項目的步驟）

1. 新建package.json配置文件(初始化一個項目)

• cmd命令： cnpm init
• 一路回車，就會在項目的文件夾下產生一個package.json文件

2. 本地安裝gulp(在項目目錄下安裝gulp)

此步驟的目的是：把gulp裏的全部的js文件從服務器上下載到項目目錄下;

• 在本目錄下cmd(命令行)執行： cnpm install gulp --save-dev
• 安裝完成後，就會在項目目錄下產生一個node_modules文件

3. 使用gulp

在項目根目錄下建立 gulpfile.js

• 在這個js文件中寫上js代碼，就可使用。
• gulp.task("任務名稱",回調函數);

• gulp.src("源文件路徑");

  • gulp.src() 是讀取將要處理的文件，即源文件

• gulp.dest("目的路徑");

  • gulp.dest() 是處理後的文件的路徑，即目的文件

• pipe(操做);

  • pipe() 管道，是如何處理該文件（如：sass編譯，複製文件，壓縮文件等）
• 原生的gulp有：task src dest watch

原生gulp (4個)

複製文件

const gulp = require("gulp");

// gulp原生方法
// gulp.task("任務名稱",回調函數)
gulp.task("_copy",function(){
    gulp.src("2fs.txt").pipe(gulp.dest("d:/dest"));
});

// cmd命令行: gulp 任務名, 如gulp _copy

結果：d:/dest下有了2fs.txt文件，說明覆製成功了。

批量操做：

//目錄js下的全部目錄
// 注意該方法只會賦值js文件夾下的全部文件和文件夾,自己的js文件夾沒有賦值
gulp.src("js/**/*").pipe(gulp.dest("d:/dest"));

//把項目目錄下的全部文件都進行拷貝 （包括子文件夾，無論有多少級）
//注意：該方法仍然不會複製該項目文件夾，只會複製項目下的文件和文件夾
gulp.src("./**/*").pipe(gulp.dest("d:/dest"));

項目：day34

複製後：

監聽文件 watch

gulp.watch("監聽的文件",回調函數);

gulp.task("_watch",function(){
    gulp.watch("2fs.txt",function(){
        gulp.src("2fs.txt").pipe(gulp.dest("d:/dest"));
    });
});

本地安裝gulp插件

• npm install moduleName

  • 安裝模塊到項目目錄下

• npm install -g moduleName

  • g 的意思是將模塊安裝到全局，具體安裝到磁盤哪一個位置，要看 npm config prefix 的位置。

• npm install -save moduleName

  • -save 的意思是將模塊安裝到項目目錄下，並在package文件的dependencies節點寫入依賴。

• npm install -save-dev moduleName

  • -save-dev 的意思是將模塊安裝到項目目錄下，並在package文件的devDependencies節點寫入依賴。

gulp自己只作一些文件的拷貝，監視等等，可是它提供了不少的接口，由插件完成更多對應的任務，如：js文件的編譯，合併文件，壓縮文件，優化圖片的尺寸，建立本地的開發服務器。下面先介紹經常使用的，更多的能夠找gulp的插件。

合併文件

cmd命令： cnpm install gulp-concat --save-dev

const gulp_concat = require('gulp-concat');
gulp.task("_concat",function(){
gulp.src(["js/a.js","js/b.js"]).pipe(gulp_concat("tools.js")).pipe(gulp.dest("d:/dest"));
});

壓縮文件

cmd命令：cnpm install gulp-uglify --save-dev

const gulp_uglify = require('gulp-uglify');

gulp.task("_ugly",function(){
    gulp.src("tools.js").pipe(gulp_uglify()).pipe(gulp.dest("d:/dest"));
});

壓縮圖片

cmd 命令： cnpm install gulp-imagemin --save-dev

const gulp_imgmin = require('gulp-imagemin');
// 壓縮圖片 cnpm install gulp-imagemin --save-dev
gulp.task("_imgMin",function(){
    gulp.src("img/**/*").pipe(gulp_imgmin()).pipe(gulp.dest("d:/dest"));
});

壓縮css

cmd命令：cnpm install gulp-minify-css --save-dev

const gulp_minCss = require('gulp-minify-css');
// 壓縮CSS
gulp.task("_minCss",function(){
    gulp.src("css/test.css").pipe(gulp_minCss()).pipe(gulp.dest("d:/dest"));
});

重命名

cmd命令：cnpm install gulp-rename --save-dev

const gulp_rename = require('gulp-rename');
//合併 壓縮 重命名 拷貝
gulp.task("_rename",function(){    gulp.src(["js/a.js","js/b.js"]).pipe(gulp_concat("tools.js")).pipe(gulp_uglify()).pipe(gulp_rename("tools.min.js")).pipe(gulp.dest("d:/dest"));
});

ES6轉ES5

cnpm install --save-dev babel-preset-es2015

cnpm install --save-dev gulp-babel@7 babel-core babel-preset-env

const gulp_babel = require('gulp-babel');
gulp.task("_babel",function(){
    gulp.src("MF.js").pipe(gulp_babel({presets: ['es2015']})).pipe(gulp.dest("d:/dest"));
});

正在進行的項目如何用gulp:

1. 新建空文件夾做爲項目的文件夾（不要用gulp做爲項目文件夾）
2. 用npm初始化項目：用npm ini命令產生package.json文件（第五步）
3. 本地安裝gulp
4. 把項目目前的全部文件拷貝的到新建的項目文件夾裏
5. 在項目根目錄下寫gulpfile.js的代碼

簡化版：

使用步驟1.下載全局gulp命令 cnpm install gulp -g2.cnpm init 建立配置文件3.下載gulp 模塊 cnpm install gulp --save-dev4.在項目根目錄下建立 gulpfile.js