├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── site ├── index.html └── js │ ├── bundle.js │ ├── main.js │ └── module.js └── tasks ├── .babelrc ├── index.js ├── server.js └── webpack.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Gulp 4 with Webpack 2 | This is the demo repo for the [CSS Tricks article](https://css-tricks.com/combine-webpack-gulp-4). 3 | 4 | ## How to use 5 | Download the repo and run: 6 | ``` 7 | npm install 8 | npm run dev 9 | ``` 10 | 11 | ## Test HMR 12 | To test **Hot Module Reloading** switch to the `hmr` branch and run `npm install` again. 13 | 14 | Demo is set up with **Vue**. To see it in action run `npm run dev`, open the given localhost address and change the message in `site/js/App.vue`. 15 | The new message will be hot reloaded - no whole window refresh. 16 | 17 | ```js 18 | export default { 19 | data() { 20 | return { 21 | msg: 'Hello World!' // <- change the string 22 | } 23 | } 24 | } 25 | ``` 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp4-webpack", 3 | "version": "1.0.0", 4 | "description": "A modern ES6 Gulp workflow combined with Webpack", 5 | "scripts": { 6 | "dev": "gulp --require @babel/register --gulpfile tasks", 7 | "build": "gulp build --require @babel/register --gulpfile tasks" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/pascalaoms/gulp4-webpack" 12 | }, 13 | "author": "Pascal Klau", 14 | "license": "MIT", 15 | "devDependencies": {}, 16 | "dependencies": { 17 | "@babel/core": "^7.4.3", 18 | "@babel/preset-env": "^7.4.3", 19 | "@babel/register": "^7.4.0", 20 | "browser-sync": "^2.26.3", 21 | "gulp": "^4.0.0", 22 | "webpack": "^4.30.0", 23 | "webpack-dev-middleware": "^3.6.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /site/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Gulp 4 with Webpack 6 | 7 | 8 | 9 |

Gulp 4 with Webpack

10 |

Open the console to the see imported log.

11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /site/js/bundle.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t);console.log("I got imported!")}]); -------------------------------------------------------------------------------- /site/js/main.js: -------------------------------------------------------------------------------- 1 | import testLog from './module' 2 | 3 | testLog() 4 | -------------------------------------------------------------------------------- /site/js/module.js: -------------------------------------------------------------------------------- 1 | export default function() { 2 | console.log('I still got importedin April 2019!') 3 | } 4 | -------------------------------------------------------------------------------- /tasks/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /tasks/index.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | 3 | import { scripts } from './webpack' 4 | import { server } from './server' 5 | 6 | export const dev = gulp.series( server ) 7 | export const build = gulp.series( scripts ) 8 | 9 | export default dev 10 | -------------------------------------------------------------------------------- /tasks/server.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import Browser from 'browser-sync' 3 | import webpack from 'webpack' 4 | import webpackDevMiddleware from 'webpack-dev-middleware' 5 | 6 | import { config as webpackConfig } from './webpack' 7 | 8 | const browser = Browser.create() 9 | const bundler = webpack(webpackConfig) 10 | 11 | export function server() { 12 | 13 | let config = { 14 | server: 'site', 15 | open: false, 16 | middleware: [ 17 | webpackDevMiddleware(bundler, { /* options */ }) 18 | ], 19 | } 20 | 21 | browser.init(config) 22 | 23 | gulp.watch('site/js/*.js').on('change', () => browser.reload()) 24 | } 25 | -------------------------------------------------------------------------------- /tasks/webpack.js: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | import webpack from 'webpack' 3 | import process from 'process' 4 | 5 | const isProduction = (process.env.NODE_ENV === 'production') 6 | 7 | let config = { 8 | 9 | entry: './js/main.js', 10 | 11 | output: { 12 | filename: './js/bundle.js', 13 | path: path.resolve(__dirname, '../site') 14 | }, 15 | 16 | context: path.resolve(__dirname, '../site'), 17 | 18 | plugins: isProduction ? [ new webpack.optimize.UglifyJsPlugin() ] : [] 19 | } 20 | 21 | 22 | function scripts() { 23 | 24 | return new Promise(resolve => webpack(config, (err, stats) => { 25 | 26 | if(err) console.log('Webpack', err) 27 | 28 | console.log(stats.toString({ /* stats options */ })) 29 | 30 | resolve() 31 | })) 32 | } 33 | 34 | module.exports = { config, scripts } 35 | --------------------------------------------------------------------------------