Gulp插件，及使用方法。-有解無憂

Gulp插件

gulp-htmlmin : html檔案壓縮

gulp-csso ：壓縮css

gulp-babel : javaScript語法轉換

gulp-less : less語法轉換

gulp-uglify : 壓碩訓淆javaScript

gulp-file-include : 公共檔案包含

browsersync ：瀏覽器實時同步

npm常用的安裝命令

npm i 就是npm install 簡寫
npm i xxx -D   就是 npm i xxx --save-dev
npm i xxx -S   就是 npm i xxx --save
npm i xxx -g   就是 全域安裝
npm i xxx      就是 npm i xxx --save

// 下載插件
npm install  gulp-htmlmin
//引入

// 參考gulp模塊 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'); // 使用gulp.task建立任務 // 1.任務的名稱 // 2.任務的回呼函式 gulp.task('first', () => {     console.log('我們人生中的第一個gulp任務執行了');     // 1.使用gulp.src獲取要處理的檔案     gulp.src('./src/css/base.css')         .pipe(gulp.dest('dist/css')); });
// html任務 // 1.html檔案中代碼的壓縮操作 // 2.抽取html檔案中的公共代碼 gulp.task('htmlmin', () => {     gulp.src('./src/*.html')         .pipe(fileinclude())         // 壓縮html檔案中的代碼         .pipe(htmlmin({ collapseWhitespace: true }))         .pipe(gulp.dest('dist')); });
// css任務 // 1.less語法轉換 // 2.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任務 // 1.es6代碼轉換 // 2.代碼壓縮 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')) });
// 構建任務 gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/196607.html

標籤：JavaScript

上一篇：一個原生JavaScript影片庫原型

下一篇：Truthy、Falsy與true、false的區別