skycel/laragon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove old data

Browse Source
This commit is contained in:
Khoa Le
2016-06-15 17:48:09 +07:00
parent 2f4de88bf4
commit df648d235b
111 changed files with 0 additions and 3154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
build-process-introduction.md
View File

@@ -1,112 +0,0 @@
---
---
# Build process introduction
## Table of contents
- [Introduction to Gulp](#introduction-to-gulp)
- [Customize the build process](#customize-the-build-process)
- [Add more modules](#add-more-modules)
## Introduction to Gulp
[Gulp](http://gulpjs.com/) is a build tool based on [Node.js](https://nodejs.org/). It provides a Javascript interface to maintain complex build tasks intuitive and manageable.
You can find different `gulpfile.js` files inside a Wakanda project.
*mobile folder*
<img src="img/mobile-tree-gulpfile.png" />
*web folder*
<img src="img/web-tree-gulpfile.png" />
These are the entry points of the build process of your application.
Wakanda Studio is able to run the build tasks defined in the `gulpfile.js` files.
[How to install Gulp »](installation.html#increase-your-productivity){:class="btn"}
## Customize the build process
Gulp logic can be summarized by the concept of *tasks*. A `gulpfile.js` can include multiple tasks. When Gulp is launched, it collects all the tasks defined by the user and runs the specified ones.
Gulp is optional. When installed, the Studio is able to run several additional functionalities like the live-reload defined on `web/gulpfile.js`.
On *Run Page* the `serve` task is triggered:
```javascript
gulp.task('serve', ['watch', 'connect']);
```
The first parameter is the task name, 'serve', and the second parameter can be a function or an actions list. By default we run different tasks:
- `connect`: launch a server ready to live-reload when a file change message is received.
```javascript
gulp.task('connect', function() {
connect.server({
root: ['.'],
port: options.connectPort,
livereload: {
port: options.livereloadPort
},
middleware: function(conn, opt) {
return [
proxy('!/app/**', {
target: options.serverUrl,
changeOrigin: false,
ws: true
})
];
}
});
});
```
- `watch` and `reload`: watch file changements in the specified folders and inform the live-reload server.
```javascript
var baseFolder = options.app;
gulp.task('watch', function() {
gulp.watch([
baseFolder + 'scripts/**/*.js',
baseFolder + 'styles/**/*.css',
baseFolder + 'views/**/*.html',
baseFolder + 'index.html'
], ['reload']);
});
gulp.task('reload', function() {
gulp.src(options.app + '**')
.pipe(connect.reload());
});
```
This is the code necessary for the live-reload to work. These tasks are normally different for each project:
- An appropriate folders and/or files list should be provided in the `watch` task.
- Root location, live-reload and proxy settings could be customized when necessary.
## Add more modules
Many additional Gulp modules are available. Here's a list of the most popular packages:
- [Sass](https://www.npmjs.com/package/gulp-sass){:target="blank_"}
- [Less](https://www.npmjs.com/package/gulp-less){:target="blank_"}
- [Babel](https://www.npmjs.com/package/gulp-babel){:target="blank_"}
- [TypeScript](https://www.npmjs.com/package/gulp-typescript){:target="blank_"}
- [CoffeScript](https://www.npmjs.com/package/gulp-coffee){:target="blank_"}
- [Handlebars templates](https://www.npmjs.com/package/gulp-handlebars){:target="blank_"}
- [Mustache templates](https://www.npmjs.com/package/gulp-mustache){:target="blank_"}
- [JS Uglify](https://www.npmjs.com/package/gulp-uglify){:target="blank_"}
- [Imagemin](https://www.npmjs.com/package/gulp-imagemin){:target="blank_"}
---
Let’s see an example:
[Compile SASS files automatically »](sass-precompilation.html){:class="btn"}