Front-end build tool Gulp Getting Started tutorial

This article assumes that you have not previously used any task scripts (task runner) and command-line tools, step by step to teach you to get started gulp. Do not be afraid, it is actually very simple, I will be divided into five steps to introduce you to gulp and help you accomplish some amazing things. Let's go straight to the beginning.

First Step: Install node

First of all, the most basic and most important thing is that we need to build the node environment. Visit http://nodejs.org, then click the Big Green install button and run the program directly after the download is complete, and everything is ready. NPM will be installed with the installation package and will be used later.

Step two: Use the command line

Maybe now you don't quite understand what a command line--osx in the terminal (Terminal), in Windows command Prompt, but soon you'll know. It doesn't look that simple, but once you get the hang of it, it's easy to execute a lot of command-line programs, such as Sass,yeoman and Git, which are very useful tools.

If you are familiar with the command line, skip directly to step four.

To make sure that node is properly installed, we execute a few simple commands.

node -v

Enter (enter), if installed correctly, you will see the version number of the node installed, and then see NPM.

npm -v

This will also get the NPM version number.

If these two lines of command are not returned, the node may not be installed correctly, try restarting the command-line tool, and if not, you can only go back to the first step to reload.

Step three: Navigate to the project

Now that we have an overview of the command line and know how to use it simply, the next two simple commands can be used to locate the file directory and see what files are in the directory.

1. CD, navigate to Directory
2. LS, listing the file list

It is recommended to tap these two commands to learn more about the file system and to know where the files are.

Accustomed to using these two commands, it is necessary to enter our project directory, this directory is different, for example, this is my command to enter the project directory:

cd /Applications/XAMPP/xamppfiles/htdocs/my-project

After successfully entering the project directory, we started to install Gulp.

Fourth Step: Install Gulp

We already know how to use the command line, now try something new, know NPM and then install Gulp.

NPM is a command-line-based node package management tool that installs node's program module into a project and can view and search all available program modules on its website.

On the command line, enter

npm install -g gulp 

1. sudo executes the command as an administrator and typically requires a computer password

2. NPM is the tool for installing the node module, executing the install command

3. -G means installed in the global environment so that any project can use it

4. Finally, Gulp is the name of the node module that will be installed

While the runtime is aware that there is no error message on the command line, you can use the following command to view the Gulp version number to ensure that Gulp is installed correctly.

gulp -v

Next, we need to install the Gulp to the project local

npm install —-save-dev gulp

Here, we use —-save-dev to update the Package.json file, updating the devDependencies value to indicate that the project needs to rely on gulp.

DependenciesYou can indicate to other participants in the project that the node module in the development environment and production environment is lazy and want to know more about it to see the Package.json documentation.

Fifth step: Create a new Gulpfile file and run the Gulp

After installing gulp we need to tell it what to do for us, first of all we need to figure out what tasks the project needs.

• Check JavaScript
• Compiling sass (or less) files
• Merging JavaScript
• Compress and rename merged JavaScript

Installation dependencies

install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev 

Note that if the above command prompts for permission errors, you need to add the sudo attempt again.

New Gulpfile File

Now that the components are installed, we need to create a new Gulpfile file to specify what the gulp needs to accomplish for us.

Gulp has only five methods:,,, task run watch src , and dest , in the project root, create a new JS file and name it gulpfile.js, and paste the following code in:

Gulpfile.js

//Introduction of GulpvarGulp = require ('Gulp'); //Introducing ComponentsvarJshint = require ('Gulp-jshint');varSass = require ('Gulp-sass');varConcat = require ('Gulp-concat');varUglify = require ('gulp-uglify');varRename = require ('Gulp-rename');//Check ScriptGulp.task ('Lint', function () {GULP.SRC ('./js/*.js'). Pipe (Jshint ()). Pipe (Jshint.reporter ('default'));});//Compiling sassGulp.task ('Sass', function () {GULP.SRC ('./scss/*.scss'). Pipe (Sass ()). Pipe (Gulp.dest ('./css'));});//merging, compressing filesGulp.task ('Scripts', function () {GULP.SRC ('./js/*.js'). Pipe (Concat ('All.js'). Pipe (Gulp.dest ('./dist'). Pipe (Rename ('All.min.js') . Pipe (Uglify ()). Pipe (Gulp.dest ('./dist'));});//Default TaskGulp.task ('default', function () {Gulp.run ('Lint','Sass','Scripts'); //Monitor file ChangesGulp.watch ('./js/*.js', function () {Gulp.run ('Lint','Sass','Scripts'); });});

Now, the segment explains the code.

Introducing Components

var gulp = require(‘gulp‘); var jshint = require(‘gulp-jshint‘);var sass = require(‘gulp-sass‘);var concat = require(‘gulp-concat‘);var uglify = require(‘gulp-uglify‘);var rename = require(‘gulp-rename‘);

In this step, we introduced the core gulp and other dependent components, and next, create the four different tasks of lint, sass, scripts, and default separately.

Lint Tasks

gulp.task(‘lint‘, function() {    gulp.src(‘./js/*.js‘) .pipe(jshint()) .pipe(jshint.reporter(‘default‘));});

The link task checks js/ whether the JS file in the directory has an error or warning.

Sass Tasks

gulp.task(‘sass‘, function() {    gulp.src(‘./scss/*.scss‘) .pipe(sass()) .pipe(gulp.dest(‘./css‘));});

The SASS task compiles the scss/ scss file in the directory and saves the compiled CSS file to the /css directory.

Scripts Tasks

gulp.task(‘scripts‘, function() {    gulp.src(‘./js/*.js‘)        .pipe(concat(‘all.js‘))        .pipe(gulp.dest(‘./dist‘)) .pipe(rename(‘all.min.js‘)) .pipe(uglify()) .pipe(gulp.dest(‘./dist‘));});

The scripts task merges js/ all the JS files in the directory and outputs them to the dist/ directory, and then gulp renames, compresses the merged files, and outputs them to the dist/ directory.

Default task

gulp.task(‘default‘, function(){    gulp.run(‘lint‘, ‘sass‘, ‘scripts‘); gulp.watch(‘./js/*.js‘, function(){ gulp.run(‘lint‘, ‘sass‘, ‘scripts‘); });});

At this point, we create a default task that is based on other tasks. Use .run() methods to correlate and run the tasks defined above, use the .watch() method to listen for file changes in the specified directory, and, when there are changes to the file, run other tasks defined by the callback.

Now, back to the command line, you can run the Gulp task directly.

gulp

This will perform the defined default task, in other words, the same meaning as the following command

default

Of course, we can run any task defined in Gulpfile.js, for example, now running the SASS task:

gulp sass

(Kimi: Wow, cool than ah ~)

Conclusion

Now that you've done that, set up the gulp task and run them, and now look back to the previous study.

1. Learn to install the node environment
2. Learn the simple use of the command line
3. Learned to use the command line to enter the project directory
4. Learned to use NPM and install Gulp
5. Learn how to run a gulp task

In addition, there are some reference resources for further study:

1. NPM on Gulp Components
2. Gulp's GitHub homepage
3. Official Package.json Documentation

Reprint: Http://travismaynard.com/writing/getting-started-with-gulp

http://segmentfault.com/a/1190000000372547

Front-end build tool Gulp Getting Started tutorial