|
| 1 | +<!-- front-matter |
| 2 | +id: quick-start |
| 3 | +title: Quick Start |
| 4 | +hide_title: true |
| 5 | +sidebar_label: Quick Start |
| 6 | +--> |
| 7 | + |
| 8 | +# Quick Start |
| 9 | + |
| 10 | +If you've previously installed gulp globally, run `npm rm --global gulp` before following these instructions. For more information, read this [Sip][sip-article]. |
| 11 | + |
| 12 | +### Check for node, npm, and npx |
| 13 | +```sh |
| 14 | +node --version |
| 15 | +``` |
| 16 | +![Output: v8.11.1][img-node-version-command] |
| 17 | +```sh |
| 18 | +npm --version |
| 19 | +``` |
| 20 | +![Output: 5.6.0][img-npm-version-command] |
| 21 | +```sh |
| 22 | +npx --version |
| 23 | +``` |
| 24 | +![Output: 9.7.1][img-npx-version-command] |
| 25 | + |
| 26 | +If they are not installed, follow the instructions [here][node-install]. |
| 27 | + |
| 28 | +### Install the gulp command line utility |
| 29 | +```sh |
| 30 | +npm install --global gulp-cli |
| 31 | +``` |
| 32 | + |
| 33 | + |
| 34 | +### Create a project directory and navigate into it |
| 35 | +```sh |
| 36 | +npx mkdirp my-project |
| 37 | +``` |
| 38 | +```sh |
| 39 | +cd my-project |
| 40 | +``` |
| 41 | + |
| 42 | +### Create a package.json file in your project directory |
| 43 | +```sh |
| 44 | +npm init |
| 45 | +``` |
| 46 | + |
| 47 | +This will guide you through giving your project a name, version, description, etc. |
| 48 | + |
| 49 | +### Install the gulp package in your devDependencies |
| 50 | +```sh |
| 51 | +npm install --save-dev gulp |
| 52 | +``` |
| 53 | + |
| 54 | +### Verify your gulp versions |
| 55 | +```sh |
| 56 | +gulp --version |
| 57 | +``` |
| 58 | +![Output: CLI version 2.0.1 & Local version 4.0.0][img-gulp-version-command] |
| 59 | + |
| 60 | +### Create a gulpfile |
| 61 | +Using your text editor, create a file named gulpfile.js in your project root with these contents: |
| 62 | +```js |
| 63 | +function defaultTask(done) { |
| 64 | + // place code for your default task here |
| 65 | + done(); |
| 66 | +} |
| 67 | + |
| 68 | +exports.default = defaultTask |
| 69 | +``` |
| 70 | + |
| 71 | +### Test it |
| 72 | +Run the gulp command in your project directory: |
| 73 | +```sh |
| 74 | +gulp |
| 75 | +``` |
| 76 | +To run multiple tasks, you can use `gulp <task> <othertask>`. |
| 77 | + |
| 78 | +### Result |
| 79 | +The default task will run and do nothing. |
| 80 | +![Output: Starting default & Finished default][img-gulp-command] |
| 81 | + |
| 82 | +[sip-article]: https://medium.com/gulpjs/gulp-sips-command-line-interface-e53411d4467 |
| 83 | +[node-install]: https://nodejs.org/en/ |
| 84 | +[img-node-version-command]: https://gulpjs.com/img/docs-node-version-command.png |
| 85 | +[img-npm-version-command]: https://gulpjs.com/img/docs-npm-version-command.png |
| 86 | +[img-npx-version-command]: https://gulpjs.com/img/docs-npx-version-command.png |
| 87 | +[img-gulp-version-command]: https://gulpjs.com/img/docs-gulp-version-command.png |
| 88 | +[img-gulp-command]: https://gulpjs.com/img/docs-gulp-command.png |
0 commit comments