Forked by BBaysinger mostly just to update dependencies and audit security issues.
This does NOT reprocess html for live reload. TODO: Figure that out so we can prototype with HTML.
TODO: Some updates are necessary to keep this current.
I removed the 'dest' folder from versioning and added a 'static' directory to copy static files from. This makes it easier to track the files.
Added some tasks and features. I'll need to update the documentation.
TODO: Need to make sure the new Gulp tasks are accounted for with Browsersynch and hot reload.
Gulp-webpack starter project
Gulp-webpack starter project
Gulp-webpack starter project combine gulp and webpack technology for compiling java script and style files. It's serves as initial framework for projects build with ES6 and SASS. It's also contains demo ES6 project.
- Gulp - gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow.
- Webpack - webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.
Gulp-webpack starter provides a various features which are:
- compile CSS preprocessor code (SASS) to CSS
- autoprefix, clean and minify CSS file
- include style source maps
- show message after gulp task is completed
- concatenate style and js files
- allow to use glob imports in style files
- set up a local dev server through browsersync which is available on:
http://localhost:3000
- minify and compress images (.png, .jpg, .jpeg, .svg, .ico)
- compile ES6 to ES5 code and minify js file
Content
- Gulpfile.js - define compile settings, gulp plugins and tasks
- Webpack.config.js - define configuration for webpack (compiling js files)
- ES6 cars project - demo project build in ES6
- Style structure - demonstrate style structure with .scss
Requirements
- NPM version - 6.14.4
- NODE version - 12.16.1
Installation and usage
###git clone
The other way to to get starter project is by cloning Git repository, please fallow next steps in command prompt or terminal:
cd your-project-directory
git clone https://github.com/SternadB/gulp-webpack-starter.git
npm install
- NPM modules - npm install (install all require plugins)
- Gulp build task - gulp build (run all gulp tasks)
- Gulp script task - gulp gulp:script (run script task)
- Gulp sass task - gulp gulp:sass (run sass task)
- Gulp image task - gulp gulp:image (run image task)
- Gulp serve task - gulp gulp:serve Run the dev server
Gulp plugins
- gulp-babel (JS compiler)
- gulp-plumber (prevent pipe breaking coused by errors from gulp plugins)
- gulp-concat (concatenate js files)
- gulp-sass (SASS compiler)
- gulp-notify (messages)
- sourcemaps (maps CSS back to SASS files)
- sassGlob (allow to use glob imports in scss files)
- imageMin (minify image format - png, jpeg, gif and svn)
- cleanCSS (css optimizer)
- gulp-autoprefixer (add vendor prefixes to CSS rules)
- gulp-browser-sync (create external link for browsing)
- webpack-stream (adding webpack tehnology)
- webpackconfig (webpack file with configuration)
Webpack plugins
- uglifyjs-webpack-plugin (minify js files)