gulp編譯頁面中的es6

『壹』 為什麼我使用gulp-babel不能將es6編譯成es5

需要安裝babel-preset-es2015插件，才能把es6編譯成es5
npm install --save-dev babel-preset-es2015

在gulpfile.js中增加presets
var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
return gulp.src("src/app.js")
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest("dist"));
});

『貳』 前端通過gulp編譯後的文件，怎麼部署到伺服器

伺服器上寫部署腳本，從代碼庫里拉項目代碼，跑gulp自動化。或者打包傳給後端讓他搞。

『叄』 gulp babel安裝成功了為什麼不能將es6編譯成es5

按babel官方教程來配置的：

gulpfile.js

var gulp = require("gulp");var babel = require("gulp-babel");

gulp.task("default", function () { return gulp.src("src/app.js")
.pipe(babel())
.pipe(gulp.dest("dist"));
});

app.js

'use strict';let a = 'hello world';

還需要安裝babel-preset-es2015插件，才能把es6編譯成es5

npm install --save-devbabel-preset-es2015

在gulpfile.js中增加presets

var gulp = require("gulp");var babel = require("gulp-babel");

gulp.task("default", function () { return gulp.src("src/app.js")
.pipe(babel({ presets: ['es2015']
}))
.pipe(gulp.dest("dist"));
});

『肆』 gulp 怎麼將es6轉為es3

gulp在3.9版本裡面增加了對babel的支持，因此我們可以直接在gulpfile裡面使用ES6(ES2015)了。

升級gulp版本

首先要檢測一下我們的gulp版本，確保CLI版本及Local版本都在3.9之上:
gulp -v

版本如下：
CLI version 3.9.0
Local version 3.9.0

若版本過低，我們可以通過以下方式進行升級，這里將同時升級CLI版本和Local版本：
npm install gulp -g && npm install gulp --save-dev

安裝babel

我們需要安裝babel-core及babel-preset-es2015來轉換ES6代碼：
npm install babel-core babel-preset-es2015 --save-dev

然後，創建一個.babelrc文件來使用es2015 preset：
touch .babelrc

寫入如下內容：
{
"presets": ["es2015"]
}

接下來就是使用ES6語法重寫gulpfile了。

使用ES6語法重寫gulpfile

首先，重命名gulpfile.js為gulpfile.babel.js，這樣gulp執行前會自動調用babel轉換文件。
mv gulpfile.js gulpfile.babel.js

然後在gulpfile.babel.js裡面用ES6語法寫些內容，如下：
'use strict';

import gulp from 'gulp';
import less from 'gulp-less';

const paths = {
less: 'less/',
dest: 'build/'
};

gulp.task('less', () => {
gulp.src(`${paths.less}**/*.less`)
.pipe(less())
.pipe(gulp.dest(`${paths.dest}css/`));
});

然後執行gulp命令：
gulp less

這里和原來一樣，以前的命令怎麼用現在還是怎麼用!

GitHub源碼：using-es6-with-gulp

『伍』 如何用webpack打包一個網站應用

隨著前端技術的發展，越來越多新名詞出現在我們眼前。angularjs、react、gulp、webpack、es6、babel……新技術出現，讓我們了解了解用起來吧！今天我來介紹一下如何用webpack打包一個網頁應用。
一般我們寫頁面，大概都是這樣的結構：
index.html
css
style.css
js
index.js
...........

這樣我們的html里直接引用css和js，完成一個網頁應用。用webpack也類似，只是webpack把圖片、css和js都編譯打包成一個文件，我們只需要引用一個文件就可以了。
1.我們需要先安裝node環境。沒安裝的請自行安裝
2.在項目目錄下輸入npm init初始化一個node項目，輸入項目名稱等信息，完成後生成一個package.json文件。
3.在項目目錄下安裝webpack
npm install --save-dev webpack
4.我們需要一個webpack.config.js文件，記錄webpack配置信息。它的配置大概這樣：
var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, 'build');
var config = {
//入口文件
entry: {
index : './src/js/index.js'
},
extensions: ['', '.js', '.json', '.css', '.less'],
output: {
path: buildPath, //編譯後的文件路徑
filename: 'app.js'
},
mole: {
//Loaders
loaders: [
//.css 文件使用 style-loader 和 css-loader 來處理
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
//.js 文件使用 babel 來編譯處理
{ test: /\.js$/, loader: 'babel' },
//圖片文件使用 url-loader 來處理，小於8kb的直接轉為base64
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]

},
};

mole.exports = config;

我們需要指定編譯的入口文件和輸出的目錄路徑，以及css和js用什麼loader處理，比如我使用了less，要編譯less文件，就指定less-loader，js我要用es6來寫，為了兼容性，用babel來轉成es5的代碼。如果要使用react，也可以指定jsx等的編譯方式。
5.這些loader都是需要npm安裝的
npm install --save-dev css-loader less less-loader style-loader url-loader babel babel-core babel-loader babel-preset-es2015

6.如果需要用babel，在項目目錄下新建一個名為.babelrc的隱藏文件，裡面這樣寫：
{"presets":["es2015"]}

保存。
7.根據配置可以看到我們需要一個src文件夾和一個build文件夾，src放圖片、css和js的源代碼，build作為輸出文件夾放編譯後的文件。
8.src/js/index.js文件作為我們的入口文件，我們在裡面可以愉快地寫es6的代碼，比如：
'use strict';
require('../css/base.css');
require('../css/animate.css');
require('../css/style.less');
require('../js/zepto.min.js');
let a = 'world';
let hello = `hello ${a}`;
console.log(hello);

可以看到css我們都通過require的方式引進來，這樣webpack會把css和js打包進一個文件。
9.我們還差個index.html，放在項目文件夾下就可以，正常寫，引入build/app.js就可以啦！
10.讓我們試試吧

『陸』 為什麼我使用gulp-babel不能將es6編譯成es5

習慣了WebStorm的話..我就假設題主會用Node.js和npm啦～ 一句話總結：用WebStorm自帶的File Watcher功能+Babel實現自動轉換ECMAScript 6代碼為ES5代碼 我是這么配置的..就先新建一個Empty Project，然後在src目錄下新建了一個main.js； // 這一...

『柒』 gulp-babel編譯es6後的require怎麼處理

gulp在3.9版本裡面增加了對babel的支持，因此我們可以直接在gulpfile裡面使用ES6(ES2015)了。 升級gulp版本 首先要檢測一下我們的gulp版本，確保CLI版本及Local版本都在3.9之上: gulp -v 版本如下