1：創建一個文件夾，這里取名為final,要是沒有安裝過gulp的就先全局安裝Gulp包： ? npm install -g gulp?

2;在目錄下新建文件夾src，存放源文件。

3:在final文件夾下cmd，輸入npm init，初始化npm

這兒出現的信息隨便填寫，不寫直接enter就是用默認值。

出現is this ok,輸入y,回車。

生成如下目錄結構：

4：在final目錄下新增文件：.babelrc（這里我是取消了嚴格模式）

執行命令?npm install babel-plugin-transform-remove-strict-mode -D

5：?安裝 gulp

命令：npm install gulp --save-dev。

6：安裝gulp-babel，babel-core 和babel-preset-es2015

命令：npm install gulp-babel@7.0.1 babel-core babel-preset-es2015 --save-dev

注意：gulp-babel版本最好不要超過8.0.0，否則可能出現Plugin/Preset files are not allowed to export objects的問題。

成功之后會在根目錄下看到node模塊文件夾

7:下載（重命名與壓縮插件）npm install gulp-rename gulp-uglify

8：在final文件夾下新建gulpfile.js文件。

內容如下：

這里任務名為minjs,??gulp.src('./src/*.js')表示的是源代碼路徑，.pipe(gulp.dest('./src/'))代表新文件生成的路徑。

.pipe(rename(function?(file){? 是新生成的文件的文件名規則，官方教程：https://www.npmjs.com/package/gulp-rename

輸入gulp minjs執行：

生成結果：

二：壓縮html，這里我只是處理了html標簽的換行與空格。

1:gulp-htmlmin?這是一款HTML文件壓縮插件, 通過命令npm install --save-dev gulp-htmlmin下載，官網：https://www.npmjs.com/package/gulp-htmlmin

2：創建gulp任務：

若需要去除html中注釋的內容則在collapseWhitespace: true后面添加:removeComments: true，需要注意的是，壓縮后組件上的大寫變量名會變成小寫，需要大小寫敏感加上caseSensitive:true即可，多個屬性之間,號分隔。

參考網址：https://github.com/kangax/html-minifier

3：壓縮，輸入命令,gulp htmlmin。

三：壓縮css

1:下載gulp-minify-css，命令npm install gulp-minify-css --save-dev

2：創建gulp任務：

const minifycss = require("gulp-minify-css");//壓縮cssgulp.task('cssTask', function () {return gulp.src("./src/*.css").pipe(minifycss({advanced: false,//類型：Boolean 默認：true [是否開啟高級優化（合并選擇器等）]keepBreaks: false,//是否保留換行，默認falsekeepSpecialComments: '*'//保留所有特殊前綴})).pipe(gulp.dest('./dist/')) });

3：壓縮，輸入命令gulp cssTask。

?

總結

以上是生活随笔為你收集整理的gulp+babel实现es6压缩，并替换es6语法，压缩html,css的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。