Tutorial by Examples

Loading All The Plugins from Package.JSON

Assuming , you have a grasp of how to install gulp, let us dive right down to requiring all the gulp- dependencies from package.json under your projects root folder. In case you do not have a gulpfile yet , please create an empty file with the name gulpfile.js First , we require gulp. like so: v...

gulp • Comprehensive Guide to a Front-end Workflow Automation with Gulpjs -1 of 2

Installing Plugins for Responsive images|Css Minification|Js minification

Our goal , is to Make your Images conform to widths and scale appropriately, by generating a battery of images of varied widths, and to minify them Lint your Javascript Minimize your assets - JS/CSS/HTML , thus enabling you to host a lighter than lightest code Watch the css/js/image files for ...

gulp • Comprehensive Guide to a Front-end Workflow Automation with Gulpjs -1 of 2

Anatomy of a gulp function

[Function <name>] (glob) { $.src(glob) .pipe([plugin 1]) .pipe([plugin 2]) . . . .pipe([plugin n]) .pipe( $.dest(<destination-name>) } Note pipe is a method that streams all the files matching the glob input , to our plugins( minifyhtml in this case) . It is simple ...

gulp • Comprehensive Guide to a Front-end Workflow Automation with Gulpjs -1 of 2

Asset Optimization and Minification

So, Before writing out optimiser functions , we need to install a couple of caching plugins. bash $ npm install --save-dev gulp-cached bash $ npm install --save-dev gulp-remember You might wonder why two caches eh!. gulp-cached , passes only modified or new content down the pipeline to other ...

gulp • Comprehensive Guide to a Front-end Workflow Automation with Gulpjs -1 of 2

Anatomy of a gulp task

The anatomy of a task definition is like so: $.task(<taskname> , [dependencies] , <body>); dependencies , is an array of tasks that HAVE to finish before the current task you are defining , runs. More like forcing a synchronous execution instead of the default Asynchronous functionalit...

gulp • Comprehensive Guide to a Front-end Workflow Automation with Gulpjs -1 of 2

Adding Gulp Tasks

So, we now have A function defined Above to optimise Styles A function defined Above to optimise scripts A function defined Above to optimise HTML A function to generate multiple images per image Above All we need to do now, is to invoke them when needed. Let us write our tasks according t...

gulp • Comprehensive Guide to a Front-end Workflow Automation with Gulpjs -1 of 2

Setting up Browser sync And Configuring Watchers for Style and Script

NOTE This page illustrates use of gulp plugins like browser-sync , gulp-watch and run-sequence , and continues discussing gulp-workflow-automation from where we left off at Gulpjs-workflow-automation-1 of 2. In case you landed here , consider going through that post first. Default Task ...

gulp • Comprehensive Guide to a Front end Workflow with Gulpjs 2 of 2

Defining a Default Task

So now, let us finish the gulpfile code , by defining a Default task. the default task is the one that runs, when you just say gulp on a command prompt under the root of your project. $.task('default', ['generateResponsiveImages'], function() { $.start('watchdog'); console.log('Starting In...

gulp • Comprehensive Guide to a Front end Workflow with Gulpjs 2 of 2

Scan for access points

This example scans for available access points and ad hoc networks. btnScan activates a scan initiated by the WifiManager.startScan() method. After the scan, WifiManager calls the SCAN_RESULTS_AVAILABLE_ACTION intent and the WifiScanReceiver class processes the scan result. The results are displaye...

Android • Wi-Fi Connections

How to create a workspace

Go to File -> Switch Workspace -> Other... and type in your new workspace name.

eclipse • Create a new workspace in Eclipse

Debug on iOS device using USB

Disable Private Browsing Open your device’s Safari settings and ensure that Private Browsing is turned off. Remote debugging will not work if Private Browsing is enabled. Enable Web Inspector Tap the Advanced tab on your device’s Safari settings and ensure that Web Inspector is turned on....

Cordova • Debugging the application

Double Tap

private float minScale = 1f; private float doubleTapScale = 2f; private float maxScale = 4f; private void SetUpDoubleTapZoom() { imageViewToZoom.ContentMode = UIViewContentMode.ScaleAspectFit; scrollView.MaximumZoomScale = maxScale; scrollView.MinimumZoomScale = minScale; ...

Xamarin.iOS • UIImageView zoom in combination with UIScrollView

Pinch gesture zoom

private float minScale = 1f; private float maxScale = 4f; private void SetUpPinchGestureZoom() { imageViewToZoom.ContentMode = UIViewContentMode.ScaleAspectFit; scrollView.MaximumZoomScale = maxScale; scrollView.MinimumZoomScale = minScale; scrollView.ViewForZoomingInS...

Xamarin.iOS • UIImageView zoom in combination with UIScrollView

Loading All The Plugins from Package.JSON

Installing Plugins for Responsive images|Css Minification|Js minification

Anatomy of a gulp function

Asset Optimization and Minification

Anatomy of a gulp task

Adding Gulp Tasks

Setting up Browser sync And Configuring Watchers for Style and Script

Defining a Default Task

Scan for access points

How to create a workspace

Debug on iOS device using USB

Double Tap

Pinch gesture zoom

Basic example

Badges

Linked Items

Button items

Disabled Items

Contextual classes

Custom content