I give thanks to the following:
- jonschlinkert, for table of contents markdown code;
- Udacity, for providing various resources to help complete this project, as well as all colaborators mentionedon the resources link, specially Mathew Cranford¹²³⁴;
Click or Tab your way through the restaurant reviews, either manually or filtering the results by neighborhoods and cuisines.
On Nodejs CLI, CD into the root directory for this project and run the gulp command.
Install Node.js.
Install the latest version of npm via command line:
$ npm install npm@latest -g
To initialize a node.js project, run this at the top-level directory of your project:
$ npm init
Answer the questions that pop up on the terminal, to create a basic package.json file.
Install the task runner Gulp.js globally:
$ npm install --global gulp-cli
Install Browsersync globally:
$ npm install -g browser-sync
Install locally the npm packages I'm going to use for this project (including the Gulp package), in your devDependencies:
- gulp
- browsersync (to create a server and reload the browser automaticaly)
- jasmine (tester)
- gulp-jsdoc3 (Generates Documentation)
$ npm --install --save-dev gulp browser-sync jasmine
Create a gulpfile.js at the top level of your project directory, to require packages and configure tasks.
Open the gulpfile.js in your IDE.
Require the Gulp and Browsersync packages.
const gulp = require('gulp');
const bSrc = require('browser-sync').create();
const bDocumentation = require('browser-sync').create();
const jsdoc = require('gulp-jsdoc3');
Then set it's default task to watch the js files in the src directory:
Create the default task, with servers for the the index.html, and the /docs/gen/index.html files, and creates the jsdoc task, for generating documentation:
/**
* @file gulpefile.js. Task runner for JS.
* @desc A task runner for JS
*/
/**
* Requires the task runner's dependencies.
* @requires
*/
const gulp = require('gulp');
const jsdoc = require('gulp-jsdoc3');
const bSync = require('browser-sync').create();
const bSyncDoc = require('browser-sync').create();
/**
* Reloads the browser, upon saving changes in the watched files.
*/
gulp.task('default', () => {
gulp.watch("js/*.js").on('change', bSync.reload);
gulp.watch("css/*.css").on('change', bSync.reload);
bSync.init({
server: "./",
port: 8000,
index: "index.html",
ui: false
});
});
/*
* Generates documentation on the `doc` directory.
*/
gulp.task('jsdoc', (cb) => {
gulp.src(['./README.md', './js/*.js'], {read: false})
.pipe(jsdoc(cb));
});
/*
* Updates full documentation GUI, initiates it's server and reloads it on the browser.
*/
gulp.task('jsdoc-serve', () => {
gulp.watch("js/*.js", ["jsdoc"]).on('change', bSyncDoc.reload);
gulp.watch("README.md", ["jsdoc"]).on('change', bSyncDoc.reload);
bSyncDoc.init({
server: "./docs/gen",
port: 8080,
index: "index.html",
ui: false
});
})
If you want to creat a dist task, for copying all src files to a dist directory upon project completion:
// copies all files from the `src` directory, as well as the README.md file, to a `dist` folder
gulp.task('dist', function() {
gulp.src(['./src/**/*','./*.md'])
.pipe(gulp.dest('./dist'));
});
If you want to use SASS:
Run on terminal:
$ npm install --save-dev gulp-sass gulp-autoprefixer
And modify the gulpfile.js
const gulp = require('gulp');
const bSrc = require('browser-sync').create();
const bSpecRunner = require('browser-sync').create();
const sass = require('gulp-sass');
const autoprefixer('gulp-autoprefixer');
//If uses sass:
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
Also, modify the first line of the default task, adding it the task 'sass:watch':
gulp.task('default', ['sass:watch'], () => {
$ npm install -g eslint
Then move to the home directory for your projects and run this command:
$ eslint --init
Add the enviroments you want to lint. I use this configuration on the section "env", of your .eslintrc.json file, on the home directory, or on the top level of you project directory
I use this configuration on my home directorys .eslintrc.json file:
{
"env": {
"browser": true,
"es6": true,
"jasmine": true,
"amd": true,
"jquery": true,
"node": true
},
}
It will create an eslintrc.json file, which will contain the configurations for all your projects located at the home directory.
If you want to create special eslint configurations for a project, just move to that project's directory run eslint --init, to configure a eslintrc.json file there.
The comments you wish jsdoc to parse should start with /**
use jsdoc tags to display each information within your comments:
/**
* @file This file has tests for the app.js file.
*
* @author Ricardo Bossan <[email protected]>
*/
If you wish to generate documentation manually, for each file, the documentation will be placed on an out directory, which will be created on the folder where are run the commands:
cd <./file-path/
jsdoc <./file-path/file-name>
Run the default task, to automatically reload the browser window when a js file is modified (upon save). On the command line, enter:
$ gulp
Generate documentation for the project on the doc directory, on the top level directory of the project:
$ gulp jsdoc
This software was implemented with accessbility in mind, following the WebAim, WCAG and ARIA standarts.