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 -

  1. Unzip a fresh copy of Sparrow.
  2. Open the unzipped directory.
  3. 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.
  4. You will see a dot file named .eslintrc.json.
  5. Copy that eslintrc.json file to your project directory; in our case, it is the "~/Documents/Sparrow/" directory.
  6. 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