2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

1.在對應(yīng)的目錄安裝:

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

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

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

package.json 的內(nèi)容

{"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 文件的內(nèi)容

{"presets": ["env"] }

gulpfile.js 的文件內(nèi)容：

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)); });

在項(xiàng)目根目錄可單個(gè)執(zhí)行：gulp babel,gulp js。也可以執(zhí)行執(zhí)行g(shù)ulp，直接執(zhí)行方式會使用default命令，即會將default命令列表中的命令順序執(zhí)行。

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

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 看不到?jīng)]關(guān)系,無腦回車就好了

轉(zhuǎn)載于:https://my.oschina.net/u/2391658/blog/3024745

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。