项目作者: ganesh-tyjo

项目描述 :
Gulp app to automate tasks such as sass/scss compilation, images and scripts optimization, cache busting etc.
高级语言: JavaScript
项目地址: git://github.com/ganesh-tyjo/gulp-app.git
创建时间: 2021-05-16T10:15:20Z
项目社区:https://github.com/ganesh-tyjo/gulp-app

开源协议:MIT License

下载


Contributors
Forks
Stargazers
Issues
MIT License
LinkedIn




Gulp

The streaming build system



Automate all those boring and repetitive tasks especially in regards to deploying a html, css and javascript website.

Want to learn more about Gulp, then check out my blog Gulp 4 Tutorial



Table of Contents

- Summary
- Common Tasks
- Getting Started
- Roadmap
- Contribution
- License
- Author

Summary

  • Gulp is an open source javascript toolkit and task runner
  • It was built on Node.js and NPM
  • Used for time consuming and repetitive tasks
  • Hundreds of plugins available for different tasks

Common Tasks

  • Minification of styles and scripts
  • Concatenation
  • Cache busting
  • Testing, linting and optimization

Getting Started

Step - 1

Install Node.js

Step - 2

Install Gulp globally using following command in command line.

  1. npm install -g gulp

Step - 3

Go to your project directory and run below command from inside that directory. It will create package.json file.

  1. npm init -y

Step - 4

Install required plugins and save them as development dependencies using below command.

  1. npm install --save-dev gulp gulp-concat gulp-rename gulp-replace gulp-imagemin gulp-sourcemaps gulp-sass postcss gulp-postcss autoprefixer cssnano gulp-terser

This plugins serves below purposes.

gulp gulp-concat gulp-rename gulp-replace - Basic file operations such as concatenation, file renaming and file content replacement.

gulp-imagemin - Image optimization.

gulp-sourcemaps - Sourcemaps creation for styles and scripts.

gulp-sass postcss gulp-postcss autoprefixer cssnano - Sass/scss compilation and minify styles.

gulp-terser - Minify scripts.

After this your package.json file will look something like below.

  1. {
  2. "name": "gulp-app",
  3. "version": "1.0.0",
  4. "description": "",
  5. "main": "index.js",
  6. "scripts": {
  7. "test": "echo \"Error: no test specified\" && exit 1"
  8. },
  9. "keywords": [],
  10. "author": "",
  11. "license": "ISC",
  12. "devDependencies": {
  13. "autoprefixer": "^10.2.5",
  14. "cssnano": "^5.0.2",
  15. "gulp": "^4.0.2",
  16. "gulp-concat": "^2.6.1",
  17. "gulp-imagemin": "^7.1.0",
  18. "gulp-postcss": "^9.0.0",
  19. "gulp-rename": "^2.0.0",
  20. "gulp-replace": "^1.1.3",
  21. "gulp-sass": "^4.1.0",
  22. "gulp-sourcemaps": "^3.0.0",
  23. "gulp-terser": "^2.0.1",
  24. "postcss": "^8.2.15"
  25. }
  26. }

Step - 5

Create gulpfile.js file and copy content of my gulpfile.js in your file.

Step - 6

Update paths in gulpfile.js file according to your project folder structure.

  1. // All paths
  2. const paths = {
  3. html: {
  4. src: ['./src/**/*.html'],
  5. dest: './dist/',
  6. },
  7. images: {
  8. src: ['./src/content/images/**/*'],
  9. dest: './dist/content/images/',
  10. },
  11. styles: {
  12. src: ['./src/scss/**/*.scss'],
  13. dest: './dist/css/',
  14. },
  15. scripts: {
  16. src: ['./src/js/**/*.js'],
  17. dest: './dist/js/',
  18. },
  19. cachebust: {
  20. src: ['./dist/**/*.html'],
  21. dest: './dist/',
  22. },
  23. };

Step - 7

Run gulp tasks.

To run any specific task use below command.

  1. gulp your-task-name

To run default task use below command.

  1. gulp

This default task will run watcher task after finishing defined tasks. watcher will continuously watch for any file modifications and will run necessary tasks according to that.

To stop this watcher task and go out of watch state press ctrl + c in command prompt and answer the prompted question as Y.

  1. ^CTerminate batch job (Y/N)? Y

Roadmap

See the open issues for a list of proposed features (and known issues).

Contribution

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Author

Ganesh Shinde - ganeshshinde.tyjo@gmail.com

Project Link - https://github.com/ganesh-tyjo/gulp-app