Build tools

Tooling setup

Upgency uses NPM scripts for its build system. Our package.json includes convenient methods for working with the framework, including compiling code, running tests, and more.

To use our build system and run our documentation locally, you'll need a copy of Upgency's source files and Node. Follow these steps and you should be ready to rock:

1. Download and install Node.js, which we use to manage our dependencies.
2. Run npm install --global gulp-cli command. If you already installed Gulp CLI previously, you can skip this step and jump to step 3.
3. Navigate to the root Upgency/ directory and run npm install.
4. After Npm install complete, run npm run start command.

Yup, that's it.

Gulp, Sass and Browsersync

When install processing completed, you'll be able to run the various commands provided from the command line. Now you have an integrated workflow.

Our gulpfile.js includes the following tasks:

Core Task	Description
npm run start	If making some changes to src/scss/**/*.scss and save it. 2 files will automate update src/css/theme.css and theme.css.map This task also activate BrowserSync automate page reload
npm run build	Generates a dist/ directory with all the production files
npm run cleandist	Delete folder dist/
npm run updateall	Run npm update then npm run updateall for update plugins and alll production files to new version

If want to running task series, you can use this:

Task Series	Description
npm run mincss	Compile scss file to css and minify all css to /dist/css/ directory
npm run minjs	Minify all js to /dist/js/ directory
npm run minimg	Minify all images to /dist/img/ and generate /dist/fonts/ directory
npm run copyplugins	Copy all plugins file from node_modules/ to src/plugins/ directory

WARNING

If you are using MacOS please use sudo keyword in the command because they need administrator rights to install Gulp globally.

Autoprefixer

Upgency uses Autoprefixer (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins.

Sourcemaps

Upgency uses Gulp Sourcemaps (included in our build process) to automatically add sourcemaps css file after scss changed. This tools make your project very simple and easy to see source maps your component css.

Code Editor

Upgency uses Visual Studio Code and Sublime Text for our code editor tools. We recomended this tool in your build process.