This Gulp starter kit will help you do front-end tasks like:
- combining HTML partials
- compiling ES6+ code, so you can use next-generation JavaScript
- compiling and auto prefixing your Sass files
- optimising your images, CSS, and JavaScript files
- spinning up a web server
- reloading the browser automatically whenever a file is saved
- synchronising interaction across multiple devices/browsers
- checking accessibility of production builds
# Clone this repo
git clone https://github.com/codesect/gulp-starter.git <your-project-name>
# Navigate into your new directory
cd <your-project-name>
# Install dependencies
npm install
# Start dev server
npm startYour site is now running at http://localhost:3000. Open the project in your code editor, and edit something in the src folder. Save your changes and the browser will update in real-time.
- Gulp.js task runner
- Babel compiler
- Webpack module bundler
- Sass with PostCSS' Autoprefixer
- ImageMin image minifier
- Axe accessibility testing engine
- ESLint linter with Airbnb's base config
- Prettier code formatter
A quick look at the top-level files and directories you'll see inside.
.
├── dist
├── gulp
├── node_modules
├── src
│ ├── html
│ ├── images
│ ├── scripts
│ └── styles
├── .babelrc
├── .browserslistrc
├── .eslintrc
├── .gitignore
├── .prettierrc
├── gulpfile.babel.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
This directory contains your compiled files. It will be created only after you run npm start or npm run build. This directory is not tracked by git and won't be uploaded to your repo.
This directory contains private gulp tasks used in gulpfile.babel.js.
This directory contains all of the modules your project depends on. These are automatically installed when you run npm install.
This directory will contain all of the code related to what you will see on the front-end of your site. This is the folder you're working in. If you want to rename it to something else, don't forget to update the gulp/config.js file.
This is a configuration file for Babel. There is only one preset enabled by default, @babel/preset-env. It only includes polyfills and code transforms needed for users whose browsers are defined in your .browserlistrc config.
This is a configuration file used by Autoprefixer, Babel, and normalize.css to find your targeted browsers. browserslist allows you to describe which browsers your site needs to support.
This is a configuration file for ESLint. ESLint is very flexible and configurable linter that helps to identify issues in your code.
This file tells git which files it should not track.
This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.
This file contains public tasks which can be run by the gulp command.
package.json is a manifest file for Node.js projects, which includes things like metadata (the project's name, author, etc). This manifest is how npm knows which packages to install for your project. package-lock.json is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project.
A text file containing information about your project. This is the one you're reading at the moment.
Once you cloned the repo, you need to install the dependencies. You can use either yarn or npm:
npm install
# OR
yarn installIt builds HTML, CSS, and the JavaScript bundle; starts a dev server and refreshes the browser on every saved change.
npm start
# OR
yarn startIt uglifies JS, minifies CSS and images, replaces references to non-optimized scripts and stylesheets in HTML files and copies everything necessary to the dist folder - ready to upload.
npm run build
# OR
yarn buildAll contributions are welcome. See CONTRIBUTING.md for information.