What happens when you execute $ Gulp-Gulp-based front-end Integration Solution (II)

Preface

Article installed under Windows gulp--Gulp-based front-end integration Solution (a) , the installation of Gulp has been completed, due to the window environment, the article specifically mentions that can be installed Gitbash to replace the window System CMD Command-line tools. This section focuses on the task of using Gulp to complete a precompiled SASS file to become familiar with Gulp.

This address: http://www.cnblogs.com/leonkao/p/4611102.html

Gulp Overview

Gulp is a build tool that automates the processing of common tasks to increase productivity. Built on node. JS, you can use JavaScript to define tasks. Gulp doesn't do anything by itself, but he provides the ability to define tasks, perform tasks, and load plug-ins. By writing tasks to let Gulp automatically do for us such as SASS file pre-compilation, JS file compression and merging, browser synchronization and other daily tasks.

Gulp Getting Started

To get Gulp to work, you need to first create a gulpfile.js file, and all of the tasks are defined here. You then perform the task by $Gulp Task Name or $gulp . Below, assume that there is a precompiled SASS file for the task, with this small task for traction to gradually understand the Gulp.

1. Create the project folder Learning-gulp, then create the SCSS and styles subdirectories for it, respectively, for storing SASS files and CSS files. and create a sass.scss file into the Scss directory. Enter a section of SASS code:

$color: #FF0000, Body {    background-color:$color;}

2. Start Gitbash Execute $ cd/d/learning-gulp into the project directory.

3, install Gulp under current project, $ npm Install--save-dev Gulp , then install Gulp-sass plugin $ npm installed--save-dev Gulp-sass 。

4. Create the file Gulpfile.js in the project directory and enter the following:

' Use strict '; var gulp  = require (' Gulp '),      sass  = require (' Gulp-sass '); Gulp.task (  function() {    return gulp.src ("Scss/*.scss")        . Pipe (SASS ())        . Pipe (Gulp.dest ("Styles");}); Gulp.task (' Default ', [' sass ']);    

5, execute $ gulp or $ gulp "Sass" command, do not unexpectedly output the following results:

$ gulp[ A: .:Ten] Using gulpfile d:\learning-gulp\gulpf[ A: .:Ten] Starting'Sass'... [ A: .:Ten] Finished'Sass'After -ms[ A: .:Ten] Starting'default'... [ A: .:Ten] Finished'default'After8.27μs

This time, open the Styles folder, you will find a number of files named Sass.css, the contents of our first step above the Scss file compiled results. So, what happens when you execute $ gulp ?

What happens when you execute $ Gulp

As mentioned earlier, GULP itself does not do anything, but can perform tasks, so we write the task and give it to Gulp to execute it. In the fourth step of the example above, a file gulpfile.js is created, and Gulpfile.js is where we define the task. The Gulp and Gulp-sass modules are loaded at the beginning:

var gulp    = require (' Gulp '),    sass    = require (' Gulp-sass ');

Shortly thereafter, a task named sass is defined, and the second parameter of the task is executed when the SASS task is executed (anonymous function)

function () {});

Here's a look at this anonymous function body, which requires a little bit of stream Foundation.

return gulp.src ("Scss/*.scss").      Pipe (SASS ())      . Pipe (Gulp.dest ("Styles"));

Stream

Stream allows you to pass data to functions where the function modifies the data and then passes the modified data to the next function. In the example above, the GULP.SRC () function matches all sass files with the string "Scss/*.scss" and then creates a stream object. It is then passed to the SASS () function, sass () modifies the data and returns a Stream object to Gulp.dest (), and gulp.dest () outputs the file to the Styles directory.

It is not difficult to understand this code, as long as you properly understand the concept of stream in Nodejs. Here are a few articles on stream for your study reference:

Https://github.com/substack/stream-handbook

Http://nodejs.org/docs/v0.4.7/api/streams.html

http://my.oschina.net/sundq/blog/192276

GULP.SRC (globs[, Options])

The method returns the matched file as a stream that can be routed to the plugin through a pipe.

Defining Tasks (Task)

You can use the Gulp.task () function to define tasks.

The following code shows how to create a task that passes two parameters to Gulp.task (): A string Task Name, Funciton () {} Task business logic. Run $gulp Hi console will output "Hello gulp!"

function () {   console.log (' Hello gulp! ' );});

You can also create a task to perform a task list, which is a bit of a detour to see the code at a glance. The following creates a build task that executes the Sass/jshint task in turn when the task is executed.

Gulp.task (' Build ', [' sass ', ' jshint ']);

Sometimes it may be necessary to make sure that another task is completed before executing a task, so we simply insert a list of tasks to be executed in advance (array form) between the task name and the current task body, as follows:

function  () {});

This completes the HI task before executing the newtask.

Default task

As mentioned in the fifth step of the example above, execute $ Gulp or $ gulp "sass" command. Actually executing $ gulp has the same effect as $gulp default, and Gulp performs a task named default when no task name is provided. In the example above we put the SASS task before default, so executing $ gulp directly compiles the SCSS file.

Plugins

In the example above we used the Gulp-sass plug-in, the plug-in implementation of the Sass.scss file compilation, the final generation of CSS files. To use a gulp plug-in is very convenient, just load the plug-in before use, and then pipe to pass data to the plug-in, gulp almost all of the plug-ins, in the case of no configuration, can be directly used. Gulp-sass plug-in function is very perfect, through modification configuration can change its behavior, this section is only familiar with the basic operating process of gulp, and temporarily do not discuss how a plug-in how to use. Subsequent chapters will pick out the most common/useful plugins to discuss carefully, and how to accomplish a set of tasks through multiple plugins. Finally, we will explore the plugin mechanism and how to develop a plugin and submit it to the Gulp plugin library.

References

http://gulpjs.com/

http://www.smashingmagazine.com/2014/06/11/building-with-gulp/

https://markgoodyear.com/2014/01/getting-started-with-gulp/

What happens when you execute $ Gulp-Gulp-based front-end Integration Solution (II)