第三方模塊Gulp
基于node平臺(tái)開發(fā)的前端構(gòu)建工具
- 將機(jī)械化操作編寫成任務(wù)滩报，想要執(zhí)行機(jī)械化操作時(shí)執(zhí)行一個(gè)命令行命令任務(wù)就能自動(dòng)執(zhí)行了猴娩，用機(jī)器代替手工欺殿，提高開發(fā)效率
- Gulp能做什么桦卒？
- 項(xiàng)目上線，HTML碗降、CSS隘竭、JS文件壓縮合并
- 語法轉(zhuǎn)換(ES6、less...)
- 公共文件抽離
- 修改文件瀏覽器自動(dòng)刷新
Gulp的使用
- 使用npm install gulp下載gulp文件
- 在項(xiàng)目根目錄下建立gulpfile.js文件
- 重構(gòu)項(xiàng)目文件夾結(jié)構(gòu)讼渊，src目錄放置源代碼文件动看，dist目錄放置構(gòu)建后文件
- 在gulpfile.js文件中編寫任務(wù)
- 在命令行工具中執(zhí)行g(shù)ulp任務(wù)
Gulp中提供的方法
-
gulp.src()：獲取任務(wù)要處理的文件 -
gulp.dest()：輸出文件 -
gulp.task()：建立gulp任務(wù) -
gulp.watch()：監(jiān)控文件的變化
const gulp = require('gulp');
// 使用gulp.task()方法建立任務(wù)
// 任務(wù)的名稱 任務(wù)的回調(diào)函數(shù)
gulp.task('first', () => {
// 獲取要處理的任務(wù)
gulp.src('./src.css/base.css')
// 將處理后的文件輸出到dist目錄
.pipe(gulp.dest('./dist/css'));
});
Gulp插件
- gulp-htmlmin：html文件壓縮
- gulp-csso：css文件壓縮
- gulp-babel：JavaScript語法轉(zhuǎn)換
- gulp-less：less語法轉(zhuǎn)換
- gulp-uglify：壓縮混淆JavaScript
- gulp-file-include：公共文件包含
- browsersync：瀏覽器實(shí)時(shí)同步
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// html任務(wù)
// html文件代碼壓縮操作 抽取html文件中的公共代碼
gulp.task('htmlmin', () => {
gulp.src('./src/*.html')
.pipe(fileinclude())
// 壓縮html文件中的公共代碼
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist'));
});
// CSS任務(wù)
// less代碼語法轉(zhuǎn)換 css代碼壓縮
gulp.task('cssmin', () => {
// 選擇css目錄下的所有l(wèi)ess文件以及css文件
gulp.src(['./src/css/*.less', './src/css/*.css'])
// 將less語法轉(zhuǎn)換為css語法
.pipe(less())
// 將css代碼進(jìn)行壓縮
.pipe(csso())
// 將處理后的結(jié)果進(jìn)行輸出
.pipe(gulp.dest('dist/css'))
});
// JavaScript任務(wù)
// ES6語法轉(zhuǎn)換 JS代碼壓縮
gulp.task('jsmin', () => {
gulp.src('./src/js/*.js')
.pipe(babel({
presets(['@babel/env'])
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
})
// 復(fù)制文件夾
gulp.task('copy',()=>{
gulp.src('./src/images')
.pipe(gulp.dest('dist/images'));
gulp.src('./src/lib')
.pipe(gulp.dest('dist/lib'));
})
最近作業(yè)有點(diǎn)多，所以整理的比較少??畢竟臨近畢業(yè)了爪幻，再不努把力就該……
