wwwebman / gulp-webpack-starter Goto Github PK

Gulp Webpack Starter - fast static website builder. The starter uses gulp toolkit and webpack bundler. Download to get an awesome development experience!

License: MIT License

HTML 4.26% JavaScript 95.59% SCSS 0.15%

gulp webpack static-site-generator svg-sprites static-site-generation browsersync yarn templates gulp-tasks wordpress-development

gulp-webpack-starter's Introduction

🎉

Gulp Webpack Starter

Gulp Webpack Starter - fast and simple web development toolkit. It uses Gulp task runner and Webpack bundler. The starter perfectly fits building static HTML templates or speeding up WordPress theme development.

Version 2 is released 🎉.

Easy to start, nice to use. Check it out! 🐙

List of Content

Features
Getting Started?
Contributing
Examples

🎁 Features

Features	Description
CSS	SASS, Autoprefixer, gulp-purgecss
JS	Webpack, Babel
Live Reload	BrowserSync, Webpack Dev Middleware, Webpack Hot Middleware
HTML	gulp-file-include
Images	gulp-imagemin
SVG sprite	gulp-svg-sprite

Getting started?

📕 Recommendations

Make sure you have installed the following:

Node.js(Recommended to use Node.js v10.16.0)
npm or yarn. In this tutorial we use yarn, but you can use npm.

🎯 1. Static HTML templating

Step 1 - clone

git clone https://github.com/wwwebman/gulp-webpack-starter [my-static-template-project-name]
cd [my-static-template-project-name]

Step 2 - run

cp .env.dist .env

yarn
yarn start

Start files modification under [my-static-template-project-name]/dev/* to feel a great development experience.

Cool and pretty easy, right?

👀 2. WordPress

1. Preparation

It can be setup in a number of different ways, but we would like to describe the simplest:

Please be sure of the following:

WordPress website is available under http://localhost/[awesome_wp_project]
WordPress Theme exists

Note: folder naming on different OS can differ.

cd [awesome_wp_project]/wp-content/themes/[theme_folder_name]

git clone [email protected]:wwwebman/gulp-webpack-starter.git [frontend_folder_name]

cd [frontend_folder_name]

cp .env.wordpress .env

2. Modify .env

Required

Set correct values to BROWSER_SYNC_TARGET and BROWSER_SYNC_PUBLIC_PATH variables.

BROWSER_SYNC_TARGET - refers to WordPress website installed locally
BROWSER_SYNC_PUBLIC_PATH - refers to the relative pathname of bundle.js in the browser.

Not required

All compiled files land to themes/[theme_folder_name_folder]/assets. Modify ROOT_DIST to change the destination.

3. Double check if assets attached in `[theme_folder_name]/functions.php`:

function enqueue_styles()
{
  wp_enqueue_style('custom', get_template_directory_uri() . '/assets/css/bundle.css', [], null);
}

add_action('wp_enqueue_scripts', 'enqueue_styles');

function register_scripts()
{
  wp_enqueue_script('custom-js', get_template_directory_uri() . '/assets/js/bundle.js', [], null, true);
}

add_action('wp_enqueue_scripts', 'register_scripts');

4. Run

cd [theme_folder_name]/[frontend_folder_name]
yarn
yarn start

This is cool, isn't it?

If you still have a problem, let us know by opening an issue.

Commands

yarn start // Runs development mode
yarn build // Compiles assets in production mode

License

gulp-webpack-starter's People

Contributors

Stargazers

Watchers

gulp-webpack-starter's Issues

[GWS 14] 'NODE_ENV' is not recognized as an internal or external command, operable program or batch file.

Running on Windows 10:

yarn build
yarn run v1.3.2
$ NODE_ENV=production gulp
'NODE_ENV' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Some suggest it may be a cross platform syntax issue.

[GWS - 7] update readme.md

Add description about using proxy

ERR_INVALID_ARG_TYPE(name, 'string', value)

Hi guys.
I m getting the bellow error.
Do you have any advice?

Windows 10 PRO
Node v10.16.0
npm 6.9.0

internal/validators.js:125
throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
^

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
at validateString (internal/validators.js:125:11)
at Object.join (path.js:427:7)
at Object. (E:\new-bb\demo\config.js:52:56)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:690:17)
at require (internal/modules/cjs/helpers.js:25:18)

Thanks

[GWS - 5] add eslint

[GWS 1] browserSync configuration is broken for proxy

@scallemang has found bug after integration starter in Wordpress.
Description:
... I'm trying to use it inside a local WordPress project using MAMP. I cloned your repo into the theme folder, and I added a proxy to the config.json ("[project].dev") and changed the port to 8080 in the browserSync.js file. I also removed 'html' from the default and watch tasks. When I update the helpers.js file, the page keeps refreshing. (See link.) Are you able to advise me what I'm doing wrong?

[GWS 3] Update packages

Test and update packages

[GWS 2] Reloading all the time

Hello,
Thank you for sharing...
I have discovered that when modifying js code, the page is loading over and over and never stops.
I have seen that thanks to the browsersync notification and dev tools that keeps on blinking all the time.
Any clue ?

After few seconds hmr thrown - ERR_INCOMPLETE_CHUNKED_ENCODING

GET http://localhost:3000/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING

[GWS - 9] Structure changes

Replace config.json to /tasks/
Rename /tasks/helpers folder to /tasks/lib
Rename webpackConfig to webpack.config.js and replace one folder up
Remove gulp-util plugin

[GWS 10] create unit tests

About Deploy

Hi Mate..
Thanks for great resources. I just want to ask where i can config server details for deploy on hosting server?

'NODE_ENV' is not recognized as an internal or external command, operable program or batch file.

Running on Windows 10:

yarn deploy
yarn run v1.3.2
$ NODE_ENV=production gulp deploy
'NODE_ENV' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

May be similar to: #26

Not found bundle.js

I got issue while compiling js. Its working on local but while i have upload to server it won't work

there is no js folder inside dist folder

on live server when i try to open bundle.js

[GWS - 13] Upgrading to babel-preset-env

Change babel-preset-es2015 to babel-preset-env

[GWS - 12] Research: HMR (Webpack Hot Module Replacement) - The following modules couldn't be hot updated

HMR process-update.js :
Ignored an update to unaccepted module ...
(Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves.

Current solution:

entry: {
 app: [
  'webpack-hot-middleware/client?reload=true',
  './main.js',
  ]
 }

Infinity refresh on the Google Chrome

Expected Behavior

This the same case as #35

Current Behavior

I don't use WordPress, so I don't use proxy mode.

Steps to Reproduce

Everything is OK except JS files.
The result of each change on the JS files is infinite refreshment on the browser.

Context

OS: Windows 10 64bit Version 1909
Node.js 8.9.4

Page in the browser in infinity refresh

Expected Behavior

Normal project reassembly after edit and compile JS file

Current Behavior

Page in the browser in infinity refresh

Failure Information (for bugs)

Steps to Reproduce

Detailed steps for reproducing the issue.

clone repo on locale pc
yarn
yarn start
change any JS file
task manager after compile JS file in a loop (page in the browser in infinity refresh)

Context

Operating System - windows 10 1803
Node version - v8.11.3

[GWS - 6] add changelog.md

Browser-sync streaming

Thanks for the great starter!

What is the purpose of streaming everything. Does that really make sense?

.pipe(reload({ stream: true })));

Please check the documentation. I think the parameter stream: true is deprecated

[GWS - 8] add editorconfig

Gulp-Webpack-Starter not for Gulp 4?

After installing the node modules and run the command "npm run start" the script exists with an error

assert.js:385
throw err;
^
The setup is the same that is in this repository.

Infinite loading to all browsers

Expected Behavior

This the same case as #35 and #55

Current Behavior

I don't use WordPress, so I don't use proxy mode.

Steps to Reproduce

Does not have any frequency, sometimes it does when I save the html or JS etc

Context

OS: Windows 10 64bit Version 1909
Node.js 10.16.0

[GWS - 13] Big js bundle file size

Expected Behavior

Smaller size of bundle.js (faster compile)

Current Behavior

It takes very long to compile js. The bundle.js file is very big.

[GWS - 4] Change scripts naming to default

  "scripts": {
    "dev": "gulp",
    "pro": "gulp --production",
    "deploy": "gulp deploy --production"
  }

Why no webpack.config.js?

I am new to webpack, but every setup has a webpack.config.js. Is there a reason why you have used this file?

Yarn start under Windows svg sprite problem

Expected Behavior

_sprite.scss should be created inside dev folder:
C:\nodejs\api\dev\sass\parts\vendor_sprite.scss

Current Behavior

_sprite.scss is created inside dist/dev folder:
C:\nodejs\api\dist\dev\sass\parts\vendor_sprite.scss

Failure Information (for bugs)

when i run

yarn start

i get this error:

[12:02:07] gulp-notify: [Error running Gulp] Error: dev\sass\parts\vendor\_icons.scss
Error: File to import not found or unreadable: sprite.
        on line 5 of dev/sass/parts/vendor/_icons.scss
        from line 8 of dev/sass/parts/vendor/_index.scss
        from line 11 of dev/sass/bundle.scss
>> @import 'sprite';

   ^

Steps to Reproduce

1.Download gulp-webpack-starter
2. run in console

yarn
yarn start

Context

Windows 10 home
npm version 6.4.1
node version v10.10.0

Thanks

wwwebman / gulp-webpack-starter Goto Github PK

gulp-webpack-starter's Introduction

Gulp Webpack Starter

List of Content

🎁 Features

Getting started?

📕 Recommendations

🎯 1. Static HTML templating

Step 1 - clone

Step 2 - run

👀 2. WordPress

1. Preparation

2. Modify .env

Required

Not required

3. Double check if assets attached in [theme_folder_name]/functions.php:

4. Run

Commands

License

gulp-webpack-starter's People

Contributors

Stargazers

Watchers

Forkers

gulp-webpack-starter's Issues

Expected Behavior

Current Behavior

Steps to Reproduce

Context

Expected Behavior

Current Behavior

Failure Information (for bugs)

Steps to Reproduce

Context

Expected Behavior

Current Behavior

Steps to Reproduce

Context

Expected Behavior

Current Behavior

Expected Behavior

Current Behavior

Failure Information (for bugs)

Steps to Reproduce

Context

Recommend Projects

Recommend Topics

Recommend Org

3. Double check if assets attached in `[theme_folder_name]/functions.php`: