Using Gulp in Cordova projects in Visual Studio 2015

has been using Cordova in VS 2013 to develop mobile apps (currently available on ipad version/iphone/Android), ready to upgrade to 2015 for the next milestone, two days trying a variety of things.

The Cordova project in 2015 and the 2013 structure vary greatly, so a manual migration process is required, a process that has been tried by colleagues before, including many plugins that may have to be reinstalled, and the use of different plug-ins may not be the same.

These two days in the study of how to use the Gulp this front-end integration tool in the project, VS 2015 support this thing is a very big positive, many things can now automatically do.

Gulp needs to be installed via NPM, but the 2015 comes with NPM 2.7.4, this version of NPM has a very headache problem: The installation package depends on the level of a layer down, gulp is a very dependent on the level of a lot of packages, The direct result is that the path length exceeds the limits of the Windows system, and while the actual use of the problem is small, deleting and moving from the explorer can be cumbersome (but vs itself is no problem when uninstalling the package). Here's a screenshot of someone else on a issue on GitHub:

I was reminded on Weibo that NPM 3 has solved this problem and can flatten all the dependencies, and here are the installation methods:

1. Microsoft provides a tool to upgrade NPM on a Windows system (because it involves modifying a series of issues such as path in the system environment), which is also installed with NPM
2. Open PowerShell as an administrator
3. Execution:set-executionpolicy unrestricted-scope Currentuser–force
4. Installation:npm install-g npm-windows-upgrade
5. Execution:npm-windows-upgrade
6. Then we'll give you a list of NPM versions to choose from, the newest of which seems to be 3.5.0, but I go to npmjs to see if it's 3.4.1? So I finally chose 3.4.1.
7. Confirm the version with Npm-v after loading

And then...... found that the re-download of npm dependencies in VS is still nested ... Puzzled......

But it's good to download it by the command line ...

Then a new problem was discovered, and gulpfile.js execution could not:

I used Gulp-sass to preprocess the CSS, and it relied on node-sass,node-sass to use a Libsass library written in C, suggesting that the specified library file was not found. I looked at the source code of the Node-sass, probably because of the build time and the use of the generation path inconsistency caused by (I am here in the win32-ia32-14 directory, it seems to be compiled with the C14 compiler), toss a few moments after the fruitless, Manually downloaded the win32-ia32-11 version from GitHub ... Put it in, it's OK.

?

Gulp use is relatively simple, the installation just said (in fact, Cordova Project root directory of Package.json), and then choose some plug-ins as needed, we will use include gulp-uglify (JS minimized), Gulp-sass (pre-processing CSS), Gulp-concat (merge files). When using the root directory to create a gulpfile.js, and then is the standard play method, relatively simple, here is not more introduced, interested can refer to the Gulp document.

In the Visual Studio View menu – Other Windows – task runner in the program Explorer, you can see the tasks in Gulp:

On the left you can see all the tasks written in gulpfile.js, you can right-click directly, or right-click to bind it to the event of VS, such as HTML, JS, CSS processing before the project opens, watch (file modification can be automatically after the CSS preprocessing and other tasks).

?

Our product is a single page application (SPA), which currently involves more than 70 pages, does not use angular such framework (but in some core functions used knockout), I wrote a set of simple (have the opportunity to share), each page corresponding to an HTML, A JS, before the CSS are all written together (now more than 1800 lines ...) ）。 2015 of Cordova projects all referenced files are in the WWW directory, so the following is intended to do so:

1. Create a component_pages directory outside of the WWW directory, one for each HTML + one JS + one scss (maybe not) to put in the face
2. Use Gulp to achieve the following functions:
   1. All non-Library JS files (that is, their own JS file), uglify (if the debug mode can skip this step), and then copied to the WWW directory corresponding folder
   2. All HTML files are copied directly to the WWW directory corresponding folder
   3. All SCSS pre-compiled into CSS after merging into a CSS, copied to the WWW directory corresponding folder ...

?

Reference:

1. Automate tasks for your Cordova project by using Gulp
2. Npm-windows-upgrade

Using Gulp in Cordova projects in Visual Studio 2015