Gulp is an open-source task runner to automate tasks.
All Gulp configuration goes in gulpfile.js
where plugins are loaded and tasks are defined.
- Sass compilation
- CSS minification
- Rename files to
.min.css
- Copy minified CSS to public folder.
- Transpile ES6+ using Babel
- JS minification
- Rename files to
.min.js
- Generate JS source maps
- Rename files to
- JS minification
- Cache bust
- Watch for changes in code
NOTE: you need to have Node installed on your computer.
yarn global add gulp-cli
npm install -g gulp-cli
yarn add gulp --dev
npm install --save-dev gulp
These are the dependencies/plugins that we will use
- @babel/core: Babel compiler core
- @babel/preset-env: A Babel preset for each environment
- autoprefixer: PostCSS plugin to parse CSS and add vendor prefixes to CSS rules
- cssnano: A modular minifier, built on top of the PostCSS ecosystem
- gulp-babel: Gulp plugin for Babel
- gulp-postcss: PostCSS Gulp plugin to pipe CSS through several plugins, but parse CSS only once.
- gulp-rename: Rename files easily
- gulp-replace: A string replace plugin for Gulp
- gulp-sass: SASS plugin for Gulp
- gulp-sourcemaps: Source map support for Gulp
- gulp-uglify: Minify files with UglifyJS
Install all necessary plugins
yarn add @babel/core @babel/preset-env autoprefixer cssnano gulp-babel gulp-postcss gulp-rename gulp-replace gulp-sass gulp-sourcemaps gulp-uglify --dev
npm install --save-dev @babel/core @babel/preset-env autoprefixer cssnano gulp-babel gulp-postcss gulp-rename gulp-replace gulp-sass gulp-sourcemaps gulp-uglify
Copy the gulpfile.js to the root of your project and run Gulp.
Development environment
Run gulp
to deploy your app for distribution in the public
folder.
gulp
This will watches the following files:
- .scss
- .js
When a file changes, it runs its associated task.
To run individual tasks.
gulp [task name]
Example:
gulp sass
All available tasks
default
: Default task (can be omitted)javascript
: It transpiles, adds sourcemaps and uglify your JS filesstyle
: It compiles scss into css file, adds sourcemaps and minifywatch
: It watches for files changes
your-app/
|—— src/
| |—— sass/
| | |—— somefile.scss
| | |—— [otherfile].scss
| |—— js/
| | |—— somefile.js
| | |—— [otherfile].js
| |—— img/
| | |—— [original image files]
|—— public/
| |—— css/
| | |—— somefile.min.css
| | |—— [otherfile].min.css
| |—— js/
| | |—— somefile.min.js
| | |—— [otherfile].min.js
| |—— img/
| | |—— [optimized image files]
|—— gulpfile.js
|—— package.json
Want to contribute? All contributions are welcome. Read the contributing guide.
If you have questions tweet me at @sandro_m_m or open an issue.
This project is licensed under the MIT License - see the LICENSE file for details
**~ sharing is caring ~**