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:
|
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:
|
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:
|
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