├── .babelrc ├── .gitignore ├── README.md ├── app ├── bla.js ├── main.js ├── routes │ └── articles.js └── test.js ├── gulpfile.babel.js ├── index.js ├── package.json ├── server ├── main.js └── routes │ └── articles.js ├── src ├── css │ └── style.css ├── images │ └── image.png ├── index.html └── js │ ├── Sample.js │ └── main.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/*/ 2 | dist/* 3 | dist/*/ 4 | .gulp-cache 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gulp-es6-webpack 2 | 3 | This project use gulps to automize the process of transpiling ES6 files in both client-side and server-side. Webpack is used to support CommonJS style in client-side. 4 | 5 | In this project, 6 | * The gulpfile is written in ES6 syntax 7 | * Express.js server is written in ES6 syntax 8 | * When there is a change in server code, the code will be transpiled automatically, then it will trigger the server to restart. 9 | * Client-side JavaScript is written in ES6 syntax 10 | * When there is a change in client-side, browser-sync will trigger the browser to referesh 11 | * html and css are minified by gulp plugins 12 | -------------------------------------------------------------------------------- /app/bla.js: -------------------------------------------------------------------------------- 1 | "use strict"; -------------------------------------------------------------------------------- /app/main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _express = require('express'); 4 | 5 | var _express2 = _interopRequireDefault(_express); 6 | 7 | var _articles = require('./routes/articles'); 8 | 9 | var _articles2 = _interopRequireDefault(_articles); 10 | 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 12 | 13 | var app = (0, _express2.default)(); 14 | 15 | app.use('/', _express2.default.static(__dirname + '/../dist')); 16 | 17 | app.get('/hello', function (req, res) { 18 | return res.send('Can you hear me?'); 19 | }); 20 | 21 | app.use('/articles', _articles2.default); 22 | 23 | var server = app.listen(3000, function () { 24 | console.log('Express listening on port 3000'); 25 | }); -------------------------------------------------------------------------------- /app/routes/articles.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _express = require('express'); 8 | 9 | var _express2 = _interopRequireDefault(_express); 10 | 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 12 | 13 | var router = _express2.default.Router(); 14 | 15 | router.use(function (req, res, next) { 16 | console.log('Time: ', Date.now().toString()); 17 | next(); 18 | }); 19 | 20 | router.get('/', function (req, res) { 21 | res.send('articles'); 22 | }); 23 | 24 | router.get('/read/:id', function (req, res) { 25 | res.send('You are reading article: ' + req.params.id); 26 | }); 27 | 28 | exports.default = router; -------------------------------------------------------------------------------- /app/test.js: -------------------------------------------------------------------------------- 1 | "use strict"; -------------------------------------------------------------------------------- /gulpfile.babel.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import gulp from 'gulp'; 4 | import gutil from 'gulp-util'; 5 | 6 | import cleanCSS from 'gulp-clean-css'; 7 | import htmlmin from 'gulp-htmlmin'; 8 | import imagemin from 'gulp-imagemin'; 9 | import del from 'del'; 10 | 11 | import babel from 'gulp-babel'; 12 | import nodemon from 'gulp-nodemon'; 13 | import Cache from 'gulp-file-cache'; 14 | 15 | import webpack from 'gulp-webpack'; 16 | import webpackConfig from './webpack.config.js'; 17 | 18 | import browserSync from 'browser-sync'; 19 | 20 | let cache = new Cache(); 21 | 22 | const DIR = { 23 | SRC: 'src', 24 | DEST: 'dist' 25 | }; 26 | 27 | 28 | const SRC = { 29 | JS: DIR.SRC + '/js/*.js', 30 | CSS: DIR.SRC + '/css/*.css', 31 | HTML: DIR.SRC + '/*.html', 32 | IMAGES: DIR.SRC + '/images/*', 33 | SERVER: 'server/**/*.js' 34 | }; 35 | 36 | const DEST = { 37 | JS: DIR.DEST + '/js', 38 | CSS: DIR.DEST + '/css', 39 | HTML: DIR.DEST + '/', 40 | IMAGES: DIR.DEST + '/images', 41 | SERVER: 'app' 42 | }; 43 | 44 | gulp.task('clean', () => { 45 | return del.sync([DIR.DEST]); 46 | }); 47 | 48 | 49 | gulp.task('webpack', () => { 50 | return gulp.src('src/js/main.js') 51 | .pipe(webpack(webpackConfig)) 52 | .pipe(gulp.dest('dist/js')); 53 | }); 54 | 55 | gulp.task('css', () => { 56 | return gulp.src(SRC.CSS) 57 | .pipe(cleanCSS({compatibility: 'ie8'})) 58 | .pipe(gulp.dest(DEST.CSS)); 59 | }); 60 | 61 | gulp.task('html', () => { 62 | return gulp.src(SRC.HTML) 63 | .pipe(htmlmin({collapseWhitespace: true})) 64 | .pipe(gulp.dest(DEST.HTML)) 65 | }); 66 | 67 | gulp.task('images', () => { 68 | return gulp.src(SRC.IMAGES) 69 | .pipe(imagemin()) 70 | .pipe(gulp.dest(DEST.IMAGES)); 71 | }); 72 | 73 | /* 74 | gulp.task('watch', () => { 75 | gulp.watch(SRC.JS, ['js']); 76 | gulp.watch(SRC.CSS, ['css']); 77 | gulp.watch(SRC.HTML, ['html']); 78 | gulp.watch(SRC.IMAGES, ['images']); 79 | }); 80 | */ 81 | 82 | gulp.task('babel', () => { 83 | return gulp.src(SRC.SERVER) 84 | .pipe(cache.filter()) 85 | .pipe(babel({ 86 | presets: ['es2015'] 87 | })) 88 | .pipe(cache.cache()) 89 | .pipe(gulp.dest(DEST.SERVER)); 90 | }); 91 | 92 | gulp.task('watch', () => { 93 | let watcher = { 94 | webpack: gulp.watch(SRC.JS, ['webpack']), 95 | css: gulp.watch(SRC.CSS, ['css']), 96 | html: gulp.watch(SRC.HTML, ['html']), 97 | images: gulp.watch(SRC.IMAGES, ['images']), 98 | babel: gulp.watch(SRC.SERVER, ['babel']) 99 | }; 100 | 101 | let notify = (event) => { 102 | gutil.log('File', gutil.colors.yellow(event.path), 'was', gutil.colors.magenta(event.type)); 103 | }; 104 | 105 | for(let key in watcher) { 106 | watcher[key].on('change', notify); 107 | } 108 | }); 109 | 110 | gulp.task('start', ['babel'], () => { 111 | return nodemon({ 112 | script: DEST.SERVER + '/main.js', 113 | watch: DEST.SERVER 114 | }); 115 | }); 116 | 117 | gulp.task('browser-sync', () => { 118 | browserSync.init(null, { 119 | proxy: "http://localhost:3000", 120 | files: ["dist/**/*.*"], 121 | port: 7000 122 | }) 123 | }); 124 | 125 | 126 | gulp.task('default', ['clean', 'webpack', 'css', 'html', 127 | 'images', 'watch', 'start', 'browser-sync'], () => { 128 | gutil.log('Gulp is running'); 129 | }); 130 | 131 | 132 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/velopert/gulp-es6-webpack/89a83d3a5a91f1845cee870e07f4669b7c1441ef/index.js -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-es6-webpack", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "velopert (https://velopert.com)", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "babel-core": "^6.8.0", 13 | "babel-loader": "^6.2.4", 14 | "babel-preset-es2015": "^6.6.0", 15 | "browser-sync": "^2.12.7", 16 | "del": "^2.2.0", 17 | "graceful-fs": "^4.1.3", 18 | "gulp": "^3.9.1", 19 | "gulp-babel": "^6.1.2", 20 | "gulp-bower": "0.0.13", 21 | "gulp-clean-css": "^2.0.7", 22 | "gulp-file-cache": "0.0.1", 23 | "gulp-htmlmin": "^2.0.0", 24 | "gulp-imagemin": "^3.0.0", 25 | "gulp-nodemon": "^2.0.7", 26 | "gulp-uglify": "^1.5.3", 27 | "gulp-util": "^3.0.7", 28 | "gulp-webpack": "^1.5.0" 29 | }, 30 | "dependencies": { 31 | "express": "^4.13.4" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /server/main.js: -------------------------------------------------------------------------------- 1 | import express from 'express'; 2 | 3 | const app = express(); 4 | 5 | app.use('/', express.static(__dirname + '/../dist')); 6 | 7 | app.get('/hello', (req, res) => { 8 | return res.send('Can you hear me?'); 9 | }); 10 | 11 | import articles from './routes/articles'; 12 | 13 | app.use('/articles', articles); 14 | 15 | const server = app.listen(3000, () => { 16 | console.log('Express listening on port 3000'); 17 | }); 18 | 19 | 20 | -------------------------------------------------------------------------------- /server/routes/articles.js: -------------------------------------------------------------------------------- 1 | import express from 'express'; 2 | 3 | const router = express.Router(); 4 | 5 | router.use((req, res, next) => { 6 | console.log('Time: ', Date.now().toString()); 7 | next(); 8 | }); 9 | 10 | router.get('/', (req, res) => { 11 | res.send('articles'); 12 | }); 13 | 14 | router.get('/read/:id', (req, res) => { 15 | res.send('You are reading article: ' + req.params.id); 16 | }); 17 | 18 | export default router; 19 | -------------------------------------------------------------------------------- /src/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: black; 3 | color: aqua; 4 | } 5 | 6 | .main { 7 | text-align: center; 8 | position: fixed; 9 | top: 50%; 10 | left: 50%; 11 | -webkit-transform: translate(-50%, -50%); 12 | transform: translate(-50%, -50%); 13 | height: 400px; 14 | } 15 | -------------------------------------------------------------------------------- /src/images/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/velopert/gulp-es6-webpack/89a83d3a5a91f1845cee870e07f4669b7c1441ef/src/images/image.png -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hi 6 | 7 | 8 | 9 | 10 |
11 |

Hello World!!!

12 | 13 |
14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/js/Sample.js: -------------------------------------------------------------------------------- 1 | class Sample { 2 | constructor(name) { 3 | this.name = name; 4 | } 5 | 6 | say() { 7 | console.log("HI, I AM ", this.name); 8 | } 9 | } 10 | 11 | export default Sample; 12 | -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- 1 | import Sample from './Sample'; 2 | 3 | let sample = new Sample("velopert"); 4 | sample.say(); 5 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | 3 | module.exports = { 4 | entry: './src/js/main.js', 5 | 6 | output: { 7 | path: __dirname + '/dist/js/', 8 | filename: 'bundle.js' 9 | }, 10 | 11 | module: { 12 | loaders: [ 13 | { 14 | test: /\.js$/, 15 | loader: 'babel-loader', 16 | exclude: /node_modules/, 17 | query: { 18 | cacheDirectory: true, 19 | presets: ['es2015'] 20 | } 21 | } 22 | ] 23 | }, 24 | 25 | plugins: [ 26 | new webpack.optimize.UglifyJsPlugin({ 27 | compress: { 28 | warnings: false 29 | } 30 | }) 31 | ] 32 | }; 33 | --------------------------------------------------------------------------------