Nodejs資料之Gulp模塊

◆ 模塊作用：

基於node平臺開發的前端構建工具，將機械化操作編寫成任務, 想要執行機械化操作時執行一個命令行命令任務就能自動執行了，提高開發效率。

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

◆ 使用步驟：

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

◆ Gulp中提供的方法：

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

◆ Gulp插件：

需使用npm命令下載如下的插件：

1. gulp-htmlmin ：html文件壓縮
2. gulp-csso ：壓縮css
3. gulp-babel ：JavaScript語法轉化
4. gulp-less: less語法轉化
5. gulp-uglify ：壓縮混淆JavaScript
6. gulp-file-include 公共文件包含
7. browsersync 瀏覽器實時同步

◆ 使用gulp.task建立任務：

// 參數：任務的名稱；任務的回調函數
gulp.task('first', () => {
	console.log('我們人生中的第一個gulp任務執行了');
	// 使用gulp.src獲取要處理的文件
	gulp.src('./src/css/base.css')
		.pipe(gulp.dest('dist/css'));
});

◆ 構建任務集合：

gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);

◆ html任務：

壓縮html文件中代碼並抽取公共代碼

gulp.task('htmlmin', () => {
	gulp.src('./src/*.html')
		.pipe(fileinclude())
		// 壓縮html文件中的代碼
		.pipe(htmlmin({ collapseWhitespace: true }))
		.pipe(gulp.dest('dist'));
});

◆ css任務：

less語法轉換和css代碼壓縮

gulp.task('cssmin', () => {
	// 選擇css目錄下的所有less文件以及css文件
	gulp.src(['./src/css/*.less', './src/css/*.css'])
		// 將less語法轉換爲css語法
		.pipe(less())
		// 將css代碼進行壓縮
		.pipe(csso())
		// 將處理的結果進行輸出
		.pipe(gulp.dest('dist/css'))
});

◆ js任務：

es6代碼轉換和代碼壓縮

gulp.task('jsmin', () => {
	gulp.src('./src/js/*.js')
		.pipe(babel({
			// 它可以判斷當前代碼的運行環境 將代碼轉換爲當前運行環境所支持的代碼
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
});

◆ 複製文件夾：

gulp.task('copy', () => {
	gulp.src('./src/images/*')
		.pipe(gulp.dest('dist/images'));
	gulp.src('./src/lib/*')
		.pipe(gulp.dest('dist/lib'))
});