"Mobile web Front end efficient development" note 2--using Gulp to build a ECMAScript 6 and Sass app

8.3.1 Installation and Configuration

To run gulp requires the node. JS Environment, see chapter II, Building the node. JS Environment. Using NPM to install gulp globally, the command is as follows:

NPM Install Gulp-cli–g

Then, create the Package.json file under the project root directory, with the following command:

NPM Init

Based on the boot configuration item information. Then install the Gulp dependency package with the following command:

NPM Install Gulp–save-dev

Under Project root, create a gulpfile.js file with the following content:

var gulp = require ("gulp"); Gulp.task ("Default", function () {                     //defines a task with name "Default"         console.log ("thisis default Task ");       This defines the default task-handling process. });

Similar to grunt, gulp splits the build process into separate subtasks and uses the Gulp.task method to define the task. From the command prompt, go to the project directory and perform the task with "Gulp Task Name", with the following instance command:

Gulp Default

Tip: For default tasks, you can omit the task name.

When creating a task, similar to grunt, you can specify the dependencies for the task, which is the following code:

Gulp.task ("main", ["Deps1", "deps2", ...],function () {         //Related execution});

The second parameter (array) of the Gulp.task method is a dependency of the "main" task.

A project typically splits the build process into multiple small tasks based on requirements. Here's how to define this.

First, you specify what needs to be built, and through the Gulp plug-in to complete the build, the final output to the specified directory.

Use the Gulp.src method to specify a file source with the following code:

GULP.SRC ("Src/**/*.js");:

Or for a source under multiple directories, you can use an array

GULP.SRC (["Src/**/*.js", "theme/**/*.scss"]);

The Gulp.src method returns the Stream object, which can be passed to the plug-in by the pipe method. All plug-ins accept the data that pipe passes over, processing the data to allow chained calls, the code is as follows:

GULP.SRC ("Src/**/*.js"). Pipe (Plugin1 ()). Pipe (Plugin2 ()) ...

After the build, you need to use the Gulp.dest method to save the data to a file with the following code:

GULP.SRC ("Src/**/*.js"). Pipe (Gulp.dest ("dist"));       Read all JS under SRC, write to dist directory

Each operation of the gulp returns a Stream object, and all operations are performed in memory without the need to manipulate the disk, which greatly increases the build speed.

8.3.2 Preprocessing tasks

In the previous section, the installation, configuration, and definition and execution of the grunt task are described in gulp. This section describes compiling ECMAScript 6, sass, and CSS sprite tasks.

The "Gulp-babel" plug-in can compile ECMAScript 6 to ECMAScript 5. To run on browsers that do not support ECMAScript 6. Install the plugin first, with the following command:

NPM Install gulp-babel–save-devnpm install babel-preset-es2015  --save-dev

Then, create the task in the Gulpfile.js file with the following code:

var Babel = require ("Gulp-babel");      Introduce Babelgulp.task ("Compile-js", function () {         gulp.src ("src/**/*.js")                    //Handle all JS scripts under src                   . Pipe (Babel ({                       //Call Babel                            presets:[' es2015 ')//     use es2015 preset plugin, compile script as ECMAScript 5                   })                   pipe (gulp.dest ("Dist/js "));   The compiled content is saved to the JS directory in the Dist directory});

Babel can compile JavaScript files and even react JSX files into standard JavaScript files. Babel's official Preset plugin (presets) makes it easier for users to use Babel. Presets is a set of plug-ins that are preset for a specific compilation condition. As in this example, the ES2015 preset plug-in includes plugins with "Check-es2015-constants", "transform-es2015-arrow-functions" and so on.

Note: Babel only does a syntax-level conversion and does not add support for the API. For classes defined by the Class keyword, Babel converts it to an object defined by prototype. For ECMAScript 6 promise objects, Babel does not do any processing, so you need to extend the API that the browser does not support by Polyfill. such as "Es6-promise" allows the browser to support promise objects.

In the actual project, you can configure Babel in the ". BABELRC" file created under the root directory, with the following code:

{         "presets": ["es2015"]}

The sass file can be compiled with the Gulp-sass plugin, with the following installation commands:

NPM Install Gulp-sass–save-dev

Then, in the Gulpfile.js file, increase the task execution sass compile, the code is as follows:

var sass = require ("Gulp-sass");                            Introduction of Sass Plugin Gulp.task ("Compile-sass", function () {                   //define compilation Sass Task         gulp.src ("theme/**/*.scss")                            // Process all sass files under Theme         . PIPE (Sass (). On (' Error ', sass.logerror)        //compile with sass plug-in and handle errors         . PIPE (Gulp.dest (" Dist/css "));                           The compiled content is output to the CSS directory under the Dist directory});

In the project, in order to optimize the load performance, the small picture needs to be synthesized into a large image, that is, the so-called "CSS Sprites". This feature is implemented using the Gulp.spritesmith plugin, with the following installation commands:

NPM Install Gulp.spritesmith–save-dev

Then create the task in the Gulpfile.js file with the following code:

var spritesmith = require (' Gulp.spritesmith ');                Introduction of Sprite Plugin Gulp.task ("Sprite", function () {                                         //define Task         gulp.src ("theme/images/**.png")                          // Process the PNG file under the theme directory                   . Pipe (Spritesmith ({                                          //Call plugin merged picture                            imgname: ' sprite.png ',                         //output composite picture name                            Cssname: ' Sprite.css '                            //output corresponding CSS file                   })                   . Pipe (Gulp.dest ("dist"));                                  Output to dist directory});

This section describes three preprocessing tools, with Gulp-babel,gulp-sass and Gulp.spritesmith.

More information about:

"Mobile web Front end efficient development" note 2--using Gulp to build a ECMAScript 6 and Sass app