gulp第一節

Gulp能做什麼

1. 項目上線，html、css、js文件壓縮合並
2. 語法轉換（es6即es6轉es5、less……）
3. 公共文件抽離
4. 修改文件瀏覽器自動刷新

如何使用Gulp

1. 使用npm install gulp 下載gulp庫文件
2. 在項目根目錄下建立gulpfile.js文件
3. 重構項目的文件夾結構src目錄放置源代碼文件dist目錄，dist目錄放置構建後文件
4. 在gulpfile.js文件中編寫任務
5. 在命令行工具中執行gulp任務

安裝教程

1. 在項目目錄下安裝gulp即執行npm install gulp

提醒：先執行nrm  ls命令，查看鏡像是否是taobao

     2.安裝gulp的命令行，全局安裝

Gulp中提供的方法

1. gulp.src():獲取任務要處理的文件
2. gulp.dest():輸出文件
3. gulp.task():建立gulp任務
4. gulp.watch():監控文件的變化

 

const gulp = require(‘gulp’);

//使用gulp.task()方法建立任務,first爲任務名

gulp.task(‘first’,() =>{

// 獲取要處理的文件

Gulp.src(‘./src/css/base.css’)

//將處理後的文件輸出到dist目錄

.pipe(gulp.dest(‘./dist/css’));

});

樣例：11gulp

gulp插件

常用插件如下

1. gulp-htmlmin :html文件壓縮
2. Gulp-csso :壓縮css
3. Gulp-babel ：js語法轉化，eg： es6轉換爲es5
4. Gulp-less ： less語法轉化
5. Gulp-uglify : 壓縮混淆js
6. Gulp-file-include :公共文件包含
7. Browsersync  瀏覽器實時同步

插件使用步驟

1. npm install --save gulp-htmlmin

最新版本的--save已經沒有作用了，因此可以省略

1. 引用插件，eg：const htmlmin = require('gulp-htmlmin');

Ps：好習慣先引用gulp

1. 按照網站的例子，使用即可

 

這樣src目錄下html都會被壓縮，然後複製到dist目錄下

參考網站：https://www.npmjs.com/package/gulp-htmlmin

1. htm文件中代碼的壓縮操作

1. 下載安裝gulp插件gulp-htmlmin即npm install gulp-htmlmin
2. 壓縮

 

如何學習使用gulp插件

1. 訪問 https://www.npmjs.com/package/gulp-htmlmin
2. 根據插件名搜索需要的插件，默認是gulp-htmlmin插件
3. 根據實例使用即可