gulp es5語法轉換及js/css/html壓縮過程
阿新 • • 發佈:2019-03-20
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-dev 2.在專案目錄新建檔案 .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 看不到沒關係,