Gulp工具

1、gulp使用

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

2、gulp中提供的方法

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

• gulp運行以及使用

全局安裝npm install gulp-cli -g

在項目命令行下 輸入 gulp 任務名稱

// 引用gulp模塊
const gulp =require('gulp');
// 使用gulp.task建立任務
// 1 任務的名稱
// 2 任務的回掉函數
gulp.task('first',()=>{
	console.log('我們人生中的第一個gulp任務');
	// 1 使用gulp.src獲取處理的文件
	gulp.src('./src/css/index.css')
		.pipe(gulp.dest('dist/css'))
})

3、gulp插件

• gulp-htmlmin html文件壓縮
• gulp-csso 壓縮css
• gulp-babel javascript語法轉化
• gulp-less less語法轉化
• gulp-uglify 壓縮混淆JavaScript
• gulp-file-include 公開文件包含
• browsersync 瀏覽器始是同步

插件的使用 查詢api – 下載插件 --引入操作 --使用插件

const htmlmin =require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
// html任務
// 1 html文件中代碼的壓縮操作
// 2 抽取html文件中的公開代碼
gulp.task('htmlmin', () => {
  return gulp.src('./src/*.html')
  // 抽取公開樣式
  .pipe(fileinclude())
  // 壓縮html文件中的代碼
    .pipe(htmlmin({ collapseWhitespace: true }))
	// 輸出到dest文件
    .pipe(gulp.dest('dist'));
});