Gulp(打包工具)使用教程

gulp

gulp運行在nodejs環境下，而不是運行在瀏覽器中。因此使用gulp之前，需要使用npm安裝gulp。

安裝node

gulp是運行在nodejs環境下，因此需要安裝nodejs

node -v    #查看node版本
npm  -v    #查看npm版本

npm基本使用

npm（node package manager）nodejs的包管理器，用於node插件管理（包括安裝、卸載、管理依賴等）

npm也是全球最大的開源庫生態系統，上面管理了javascript相關的將近50W個包。使用非常的方便。

修改鏡像地址

npm默認訪問的https://www.npmjs.com/，這是國外的網站，訪問和下載速度會很慢。

淘寶鏡像 這是一個完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前爲 10分鐘 一次以保證儘量與官方服務同步。在國內，下載速度會得到質的提升

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

基本使用步驟

• 輸入npm init 進行初始化
  
  • 會生成一個package.json文件。
  • package.json是node項目的配置文件，用於管理包之間的依賴。
• npm install jquery --save就可以下載jquery的包了
  
  • --save會把內容添加到package.json中，默認下載最新版本的jquery
  • npm install [email protected] --save 下載指定版本的jquery文件。
  • nmp info jquery查看jquery這個包的信息
• npm remove 包名稱 --save 移除包的依賴，並修改package.json

關於package.json,npm可以根據該文件，配合npm install命令自動下載依賴的包，不用每次都拷貝依賴的內容，只需要一個package.json即可。

通過npm配合require在node中非常的常用，現在大夥知道安裝包的大致步驟即可。

Gulp 前端自動化構建工具

Gulp.js 是一個自動化構建工具,開發者可以使用它在項目開發過程中自動執行常見任務。

Gulp能做什麼？

• less/sass文件轉換css文件
• html文件、css文件、js文件以及圖片的壓縮
• 自動補充屬性的前綴。
• 多瀏覽器的同步

這些操作都需要手動去完成，繁瑣但是不難，如果是用了gulp，這些工作只需要一句話就能完成，實行自動化構建，從而提高了工作的效率。

官網

中文網

其他構建工具：Grunt、webpack

gulp的應用場景

• 項目發佈前，對項目進行構建
• 自動完成一系列重複的操作

js/css/html文件的壓縮，混淆，監視文件變化，同步瀏覽器等。
less轉換成css文件。

gulp的使用步驟

安裝nodejs --> 全局安裝gulp --> 項目安裝gulp以及gulp插件 --> 配置gulpfile.js --> 運行任務

安裝gulp

• 全局安裝gulp
  
  • npm install --global gulp 執行gulp命令時能夠使用gulp命令
  • –global :全局安裝在C:\Users\Administrator\AppData\Roaming\npm目錄，並且會寫入系統變量，可以在任何目錄下使用gulp命令
• 作爲項目的開發依賴（devDependencies）安裝
  
  • npm install --save-dev gulp 本地安裝gulp爲了使用gulp功能
  • --save與--save-dev的區別，後者只有開發時會使用到，在生產環境中，並不會依賴。

核心方法

task() //gulp是以任務爲單位實現功能
src()  //傳入路徑參數，獲取要處理的指定文件
dest() //指定處理後的文件輸出路徑
watch()//監視文件的變化，做出響應的處理。

使用步驟 ：

1. 在文件夾的根目錄中，創建一個gulpfile.js文件
   
   1. 文件名固定，因爲將來執行gulp命令時，會搜索gulpfile.js文件
2. 在gulpfile.js文件中寫gulp任務
3. gulp 任務名稱執行gulp任務

安裝gulp插件

• gulp-less 將less文件轉換成css文件
• gulp-uglify 壓縮和混淆js代碼
• gulp-cssnano 壓縮css代碼
• gulp-htmlmin 壓縮html代碼
• gulp-rename 文件重命名

安裝命令：npm install gulp-名稱 --save-dev進行安裝

npm install gulp-less --save-dev
npm install gulp-uglify --save-dev
npm install gulp-cssnano --save-dev
npm install gulp-htmlmin --save-dev
npm install gulp-rename --save-dev


npm install --save-dev gulp-less gulp-uglify gulp-cssnano gulp-htmlmin gulp-rename

gulp常用插件

gulp之js壓縮

//1. 引入gulp的包
var gulp = require("gulp");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename")

//2. 創建gulp任務
gulp.task('js', function () {
  //src獲取到要壓縮的文件，傳入數組可以壓縮多個文件，路徑可以使用通配符
  gulp.src("./jquery.js")
    .pipe( uglify())//使用uglify插件
    .pipe(rename({ suffix: '.min' }))    //使用rename插件，壓縮後的文件會帶上.min後綴
    .pipe( gulp.dest("./dist") );//dest:指定輸出路徑
});

最後：在gulpfile.js所在的目錄執行gulp js命令即可。

gulp之less轉css

var less = require('gulp-less');;
//less轉css任務
gulp.task("less", function () {
  gulp.src("./less/index.less")
    .pipe(less())
    .pipe(gulp.dest("./css"));
});

gulp之html壓縮

gulp.task("html", function () {
  gulp.src("./index.html")
    .pipe(htmlmin({
      collapseWhitespace: true,
      minifyCSS:true,
      minifyJS:true
    }))
    .pipe(gulp.dest("./dist"));
});

同時執行多個任務

// 同時執行多個任務，default是默認的名字，可以直接使用gulp命令執行。
gulp.task("default", ["js","less","html"],function () {
  console.log("任務執行完畢");
});

思考：將gulp應用到博學谷中

gulp之Broswer-sync

Browsersync + Gulp.js

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

// 靜態服務器
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

// 代理

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "你的域名或IP"
    });
});