A simple Gulp 4 Starter Kit for modern web development.
MIT License
A simple Gulp 4 Starter Kit for modern web development.
This Gulp Starter Kit provides a simple way of setting up a modern web development environment. Here is a list of the current features:
src
to dist
directory.pug
) from src
to HTML files and put them inside dist
directorydist
directorydist
directorypackage.json
from src/node_modules
directory into node_modules
folder inside dist
directoryhttp://localhost:3000
including auto-reloadingThis should be installed on your computer in order to get up and running:
These npm packages are used in the Gulp Starter Kit:
For more information, take a look at the package.json file or visit the linked npm package sites.
In order to get started, make sure you are meeting all requirements listed above. Then, just go ahead and download the Gulp Starter Kit. For this, you can choose between the following options:
npm init
The recommended way of downloading the Gulp Starter Kit uses the command npm init
and the create-gulp-starter-kit
npm package as the initializer.
For this, just follow these steps:
npm init @jr-cologne/gulp-starter-kit your-project-name
. This creates a folder called your-project-name
(change that to your project name) at the current location where your terminal / command prompt is pointing to. Moreover, this initializes your project and installs all dependencies.cd your-project-name
.npm start
.In case you are lazy, just use this command:
npm init @jr-cologne/gulp-starter-kit your-project-name && cd your-project-name && npm start
git clone
The other way of downloading the Gulp Starter Kit is by cloning this Git repository. Before executing any commands, make sure you have Git installed on your computer.
Then, follow these instructions:
git clone https://github.com/jr-cologne/gulp-starter-kit.git your-project-name
. This creates a folder called your-project-name
(change that to your project name) at the current location where your terminal / command prompt is pointing to.cd your-project-name
.npm install
.npm start
.If you are lazy, just do everything at once:
git clone https://github.com/jr-cologne/gulp-starter-kit.git your-project-name && cd your-project-name && npm install && npm start
You can install the Gulp Starter Kit into the current working directory by appending --current-dir
to the end of the npm init
command.
Example:
npm init @jr-cologne/gulp-starter-kit your-project-name --current-dir
The Gulp Starter Kit offers two different build scripts:
npm run build
: This is used to build all files and run all tasks without serving a development server and watching for changes.npm start
: This is the normal development script used to build all files and run all tasks, but also to serve a development server and watch for changes.In case you prefer to use one of the other supported CSS preprocessors over Sass, you can simply create a new directory src/assets/css-processor-name
which is where all your CSS preprocessor files have to be placed.
After you have moved all your code to the new folder, just make sure to delete the sass
directory and everything should work as expected.
Here's a list of the currently supported CSS preprocessors and the corresponding directory names:
src/assets/sass
)src/assets/scss
)src/assets/less
)src/assets/stylus
)The recommended way of specifying which browsers should be targeted by the CSS autoprefixer is to add a browserslist
key to package.json
:
{
"browserslist": [
"last 3 versions",
"> 0.5%"
]
}
You can find more information on that topic in the README file of the employed PostCSS plugin.
The following types of images are currently supported:
dist
folder?You don't need to specify your dependencies anywhere else than in your package.json
file.
Just install your dependencies via npm and all your dependencies get automatically loaded and copied into the dist
folder.
ES6 modules are supported by this Gulp Starter Kit. Just install your dependencies and import them like so:
import axios from 'axios';
Feel free to contribute to this project! Any kinds of contributions are highly appreciated!
Please make sure to follow the process below in order to contribute to this project:
git clone https://github.com/your-github-username/gulp-starter-kit.git
).This project uses the rules of semantic versioning. For more information, visit semver.org.
This project is licensed under the MIT License.