2019獨角獸企業重金招聘Python工程師標準>>>

1.在對應的目錄安裝:

如果沒有安裝gulp,先安裝gulp

//全局安裝gulp npm install -g gulp //項目中安裝gulp npm install --save-dev gulp如果已經安裝gulp,可無視上面直接安裝下面.npm install?gulp-babel?--save-dev npm install @babel/core@^7.0.0 --save-dev npm install babel-preset-env --save-dev2.在項目目錄新建文件.babelrc?{"presets": ["env"] }3.如果沒有gulpfile.js,新建這個文件,復制下面的代碼:// 獲取 gulp var gulp = require('gulp'); // 獲取babel模塊 var babel = require('gulp-babel');/*這里的babal是任務名,可以修改為其他turn ,change 都行,執行的時候在命令行輸入 gulp turn 或者 gulp change就行了*/ gulp.task("babel", function () {return gulp.src("./src/*.js")// ES6 源碼存放的路徑.pipe(babel())?.pipe(gulp.dest("dist")); //轉換成 ES5 存放的路徑 });4.在命令行輸入 gulp babel 就能將es6轉成es5啦

下面是例子:
一.例子的目錄

package.json 的內容

{"devDependencies": {"@babel/core": "^7.3.4","@babel/preset-es2015": "^7.0.0-beta.53","gulp": "3.9.1","gulp-babel": "^8.0.0","gulp-clean-css": "^4.0.0","gulp-htmlmin": "^5.0.1","gulp-uglify": "^3.0.2","pump": "^3.0.0"} }

.babelrc 文件的內容

{"presets": ["env"] }

gulpfile.js 的文件內容：

var gulp = require('gulp'); var cleanCSS = require('gulp-clean-css'); var htmlmin = require('gulp-htmlmin'); var uglify = require('gulp-uglify'); var pump = require('pump'); var babel = require('gulp-babel');var kBuildDir = process.env.BUILD_DEST || 'build'; var cwd = __dirname;gulp.task('default', ['babel','js','css','html']);gulp.task('css', () => {const regs = [`${kBuildDir}/**/*.css`, `!${kBuildDir}/**/*-min.css`];return gulp.src(regs, { base: '.' }).pipe(cleanCSS()).pipe(gulp.dest(cwd)); }); gulp.task('babel', () => {const regs2 = [`${kBuildDir}/**/*.js`, `!${kBuildDir}/**/*-min.js`];return gulp.src(regs2,{base:'.'}).pipe(babel()).on('error',function(e){console.log(e);}).pipe(gulp.dest(cwd)); });gulp.task('js', () => {const regs2 = [`${kBuildDir}/**/*.js`, `!${kBuildDir}/**/*-min.js`];return gulp.src(regs2,{base:'.'}).pipe(uglify()).on('error',function(e){console.log(e);}).pipe(gulp.dest(cwd)); });gulp.task('html', () => {const regs = [`${kBuildDir}/**/*.html`, `!${kBuildDir}/**/*-min.html`];return gulp.src(regs, { base: '.' }).pipe(htmlmin({ collapseWhitespace: true, removeComments: true, minifyJS: true, minifyCSS: true })).pipe(gulp.dest(cwd)); });

在項目根目錄可單個執行：gulp babel,gulp js。也可以執行執行gulp，直接執行方式會使用default命令，即會將default命令列表中的命令順序執行。

gulpfile.js里面有個模塊需要手動安裝一下：

npm install gulp-clean-css npm install gulp-htmlmin npm install gulp-uglify npm install pump npm install gulp-babel

要先安裝node.js,安裝完之后在demo的目錄里輸入npm init 看不到沒關系,無腦回車就好了

轉載于:https://my.oschina.net/u/2391658/blog/3024745

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的gulp es5语法转换及js/css/html压缩过程的全部內容，希望文章能夠幫你解決所遇到的問題。

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