Front-end build tool gulp getting started tutorial (share), gulp getting started tutorial

Front-end build tool gulp getting started tutorial (share), gulp getting started tutorial

Reference: http://segmentfault.com/a/1190000000372547

Resource:

 

This article assumes that you have never used any task script (task runner) or command line tool before, and teach you how to get started with Gulp step by step. Don't be afraid. It is actually very simple. I will introduce you to gulp in five steps and help you accomplish amazing things. Let's get started.

Step 1: Install Node

First, we need to build a node environment. Visit the http://nodejs.org and then click the big greeninstallClick to directly run the program after the download is complete, and everything is ready.NpmIt will be installed along with the installation package and will be used later.

After installation, remember to configure the environment variable NODE_PATH = "C: \ Users \ Gaming \ node_modules" (the installation path of your node is enclosed in quotation marks). The configuration method is as follows:

Step 2: Use the command line

Maybe you don't know much about the Terminal (Terminal) in OSX and Command Prompt in windows, but soon you will know. It does not seem that simple, but once you have mastered its tricks, you can easily execute many command line programs, such as Sass, Yeoman, and Git, which are very useful tools.

If you are familiar with the command line, go directly to step 4.

To ensure that the Node has been correctly installed, run a few simple commands.

node -v

Press Enter. If it is correctly installed, you will see the version number of the installed Node. Next, let's look at npm.

npm -v

The npm version can also be obtained.

If the two commands are not returned, node may not be correctly installed. Try to restart the command line tool. If not, you can only go back to the first step for reinstallation.

Step 3: locate the project

Now we have a general understanding of the command line and know how to use it. Next we only need two simple commands to locate the file directory and see what files are in the directory.

We recommend that you repeat these two commands to understand the file system and where the files are located.

After these two commands are used to, we need to enter our project directories, which are different. For example, this is the command for me to enter the my project directory:

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

After successfully entering the project directory, we start to install gulp.

Step 4: Install gulp

We already know how to use the command line. Now we can try something new, understand npm, and install gulp.

NPM is a node package management tool based on the command line. It can install node program modules in the project and view and search all available program modules on its official website.

Enter

 npm install -g gulp 

Check whether the command line has any error information during running. After the installation is complete, you can use the following command to check the version number of gulp to ensure that it has been correctly installed.

gulp -v

Next, we need to install gulp locally to the project.

npm install —-save-dev gulp

 

Here, we use—-save-devTo update the package. json file.devDependenciesTo indicate that the project depends on gulp.

DependenciesYou can tell other project participants that the node module of the Project is lazy in the development environment and production environment. For more information, see the package. json document.

Step 5: Create a Gulpfile and run gulp

After installing gulp, we need to tell it what tasks to execute for us. First, we need to figure out what tasks the project needs.

• Check Javascript
• Compile Sass (or Less) files
• Merge Javascript
• Compress and rename the merged Javascript

Install dependency

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename gulp-jshint-html-reporter --save-dev 

 

Create a gulpfile File

Now that all components are installed, we need to create a new gulpfile file to specify what tasks gulp needs to complete for us.

Gulp has only five methods:task,run,watch,src, AnddestCreate a js file in the project root directory and name itGulpfile. js, Paste the following code:

Gulpfile. js

// Introduce gulpvar gulp = require ('gulp'); // introduce the component 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'); // check the script gulp. task ('jshint', function () {gulp. src ('. /js /*. js '). pipe (jshint ())//. pipe (jshint. reporter ('default'); // The result is output in the command line by default. pipe (jshint. reporter ('Gulp-jshint-html-reporter ', {filename: 'jshint-report.html'}); // output the result to a custom html file}); // compile Sassgulp. task ('sass ', function () {gulp. src ('. /scss /*. scss '). pipe (sass ()). pipe (gulp. dest ('. /css ');}); // merge and compress the gulp file. 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 task gulp. task ('default', function () {gulp. run ('lint', 'sass ', 'scripts'); // listen for file changes in gulp. watch ('. /js /*. js', function () {gulp. run ('lint', 'sass, 'scripts ');});});

 

Now, explain the code in segments.

Introduce 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 introduce the core gulp and other dependent components. Next, we will separately create four different tasks: lint, sass, scripts, and default.

Lint task

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

 

Link task will checkjs/Is there any error or warning for the js file in the directory.

Sass task

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

 

Sass task will compilescss/Directory, and save the compiled css file/cssDirectory.

Scripts task

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 is merged.js/All js files in the directory and output themdist/Directory, and gulp will rename and compress the merged files and output themdist/Directory.

Default task

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

 

In this case, we create a default task based on other tasks. Use.run()Method to associate and run the task defined above, use.watch()Method to listen for file changes in the specified directory. When a file changes, other tasks defined by the callback will be run.

Now, go back to the command line and run the gulp task directly.

gulp

This will execute the defined default task, in other words, which means the same as the following command

gulp default

Of course, we can run any task defined in gulpfile. js. For example, run the sass task now:

gulp sass

Conclusion

Now you have set the gulp task and run them. Now let's review what we learned before.