compatibility table
src/js/main.jsを作成する
'use strict';
const init = () =>{//アローファンクション
alert(hello('Bob','Tom'));
};
function hello(...args){//レストパラメーター
return args.reduce((accu, curr) => {
return 'hello hello!${accu}${curr}';
});
}
document.addEventListener('DOMContentLoaded',event => {
init();
});
ES6のアローファンクションと、レストパラメーターをES5にトランスパイルする。
gulpfile.js
const {src, dest, watch} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();
const pkg = require('./package.json');
const conf = pkg["gulp-config"];
const sizes = conf.sizes;
const autoprefixer = require('autoprefixer');
const browserSync = require('browser-sync');
const server = browserSync.create();
function icon(done){
for(let size of sizes){
let width = size[0];
let height = size[1];
src('./favicon.png')
.pipe($.imageResize({
width,
height,
crop: true,
upscale: false
}))
.pipe($.imagemin())
.pipe($.rename(`favicon-${width}×${height}.png`))
.pipe(dest('./dist/images/icon'));
}
done();
}
function styles(){
return src('./src/sass/main.scss')
.pipe($.sourcemaps.init())
.pipe($.sass())
.pipe($.postcss([
autoprefixer({
"overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 4"],
cascade: false
})
]))
.pipe($.sourcemaps.write('.'))
.pipe(dest('./dist/css'));
}
function scripts(){//ここを付け加える
return src('./src/js/*.js')
.pipe($.babel())
.pipe(dest('./dist/js'));
}
function startAppServer(){
server.init({
server: {
baseDir: './dist'
}
});
watch('./src/**/*.scss', styles);
watch('./src/**/*.scss').on('change', server.reload);
}
exports.icon = icon;
exports.styles = styles;
exports.scripts = scripts;
exports.serve = startAppServer;
以下実行してインストール
yarn add @babel/core @babel/preset-env gulp-babel
@babel/coreはBabelのコアファイル
@babel/preset-envはES6以降のJSをES5に直すときに使う
gulp-babelはgulpからbabelを操作する際に使うプラグイン
src/.babelrcを作成
{
"presets":["@babel/preset-env"]
}
preset-envをトランスパイラの設定ファイルとして使えるようになる
dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32×32" href="images/icon/favicon-32×32.png">
<link rel="stylesheet" href="css/main.css">
<script src="js/main.js"></script>
<title>Document</title>
</head>
<body>
<h1>test</h1>
</body>
</html>
gulp scripts実行
main.jsがコンパイルされる
source.mapを使う
gulpfile.js
const {src, dest, watch} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();
const pkg = require('./package.json');
const conf = pkg["gulp-config"];
const sizes = conf.sizes;
const autoprefixer = require('autoprefixer');
const browserSync = require('browser-sync');
const server = browserSync.create();
function icon(done){
for(let size of sizes){
let width = size[0];
let height = size[1];
src('./favicon.png')
.pipe($.imageResize({
width,
height,
crop: true,
upscale: false
}))
.pipe($.imagemin())
.pipe($.rename(`favicon-${width}×${height}.png`))
.pipe(dest('./dist/images/icon'));
}
done();
}
function styles(){
return src('./src/sass/main.scss')
.pipe($.sourcemaps.init())
.pipe($.sass())
.pipe($.postcss([
autoprefixer({
"overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 4"],
cascade: false
})
]))
.pipe($.sourcemaps.write('.'))
.pipe(dest('./dist/css'));
}
function scripts(){
return src('./src/js/*.js')
.pipe($.sourcemaps.init())//ここを付け加える
.pipe($.babel())
.pipe($.sourcemaps.write('.'))//ここを付け加える
.pipe(dest('./dist/js'));
}
function startAppServer(){
server.init({
server: {
baseDir: './dist'
}
});
watch('./src/**/*.scss', styles);
watch('./src/**/*.scss').on('change', server.reload);
}
exports.icon = icon;
exports.styles = styles;
exports.scripts = scripts;
exports.serve = startAppServer;
gulp scriptsを実行
main.js.mapが作成される