Gulp

Build, serve and watch your project

To start your project run:

gulp

The gulp command will build, serve and watch the project with the following gulp tasks:

Task	Action
`clean`	Delete the following directories: `js/bootstrap scss/bootstrap pages/assets/css pages/assets/js pages/assets/lib`
`scss`	Compiles `scss/theme.scss` and generates `theme.css` and `theme.map` to the `pages/assets/css/` directory.
`js:bootstrap`	Concat the `js` files from `js/bootstrap/` and transpiles with babel to `bootstrap.js`, `bootstrap.min.js` to the `pages/assets/js/` directory.
`js:sparrow`	Concat the `js` files from `js/sparrow/` and transpiles with babel to `theme.js`, `theme.min.js` to the `pages/assets/js/` directory.
`js:plugins`	Concat the `js` files according to the `Paths.JS.PLUGINS` array declared in `gulpfile.js` and transpiles with babel to `plugins.js` and `plugins.min.js` to the `pages/assets/js/` directory.
`js`	Run the following tasks parallelly: `js:bootstrap` `js:sparrow` `js:plugins`
`copy:dependency`	Copies the dependencies from `node_modules/` directory to `pages/assets/` directory according to the `Paths.DEPENDENCIES` object declared in `gulpfile.js`.
`watch`	All of the following folders are monitored for changes, which will tell the browser to reload automatically after any changes are made: `pages/*.html pages/assets/fonts/ pages/assets/video/ pages/assets/img/ scss/ js/`
`serve`	Starts a `Browsersync` instance on port `3000` served from `pages`, defaults to `index.html`.

Other available gulp tasks

Task	Action
`scss:min`	Compiles `scss/theme.scss` and generates `theme.min.css`, and `theme.min.map` to the `pages/assets/css/` directory.
`scss:rtl`	Compiles `scss/theme.scss` and generates `theme-rtl.css`, and `theme-rtl.map` to the `pages/assets/css/` directory.
`scss:rtl:min`	Compiles `scss/theme.scss` and generates `theme-rtl.min.css`, and `theme-rtl.min.map` to the `pages/assets/css/` directory.

Common problems #

No ESLint configuration found

After running the command gulp, users sometimes face the following error -

$ gulp
[16:31:25] Using gulpfile ~/Documents/Sparrow/gulpfile.js
[16:31:25] Starting 'default'...
[16:31:25] Starting 'copy:dependency'...
[16:31:25] Finished 'copy:dependency' after 201 ms
[16:31:25] Starting 'scss'...
[16:31:26] Finished 'scss' after 826 ms
[16:31:26] Starting 'js'...
[16:31:26] Starting 'js:bootstrap'...
[16:31:26] Starting 'js:plugins'...
[16:31:26] Starting 'js:sparrow'...
[16:31:26] 'js:sparrow' errored after 33 ms
[16:31:26] Error in plugin "gulp-eslint"
Message:
No ESLint configuration found.
Details:
messageTemplate: no-config-found
messageData: [object Object]
domainEmitter: [object Object]
domainThrown: false
[16:31:26] 'js' errored after 34 ms
[16:31:26] 'default' errored after 1.06 s

This error usually happens because the .eslintrc.json file is a dot file – the system hides it by default, and while copying Sparrow's source, it does not get copied.

The following steps should solve the issue -

Unzip a fresh copy of Sparrow.
Open the unzipped directory.
On that directory, press Command+Shift+Dot to show the hidden files starting with a dot in Mac OS. If you are using windows, click the View tab in the ribbon at the top and select the "Hidden Items" checkbox in the show/hide box to show all hidden files.
You will see a dot file named .eslintrc.json.
Copy that eslintrc.json file to your project directory; in our case, it is the "~/Documents/Sparrow/" directory.
Now, with your terminal, go to your project directory and run gulp.

If you still face this problem, I suggest you unzip a fresh copy of Sparrow, do not move the files, and with your terminal cd to that directory and run:

npm i && gulp