Gulp Quick Start tutorial

1. Introduction to Gulp

Gulp introduction
- Chinese homepage: www.gulpjs.com.cn/
- Gulp is a front-end project builder similar to Grunt, as well as an automatic task runner based on Nodejs
- Can automatically complete the javascript/coffee/sass/less/HTML/image/CSS files such as merger, compression, inspection, monitoring file changes, the browser automatically refresh, testing and other tasks
- Gulp is more efficient (asynchronous multitasking), easier to use, and has high quality plug-ins
Install nodejs and view the node-v version

Create a simple application called gulp_test

| - dist | - SRC | - js | | - CSS - less | - index. HTML | - gulpfile. Js - gulp configuration file | - package. Json {" name ": "Gulp_test", "version" : "1.0.0"}Copy the code

Gulp installation:

Install gulp globally
```
npm install gulp -g
Copy the code
```

Gulp is partially installed

npm install gulp --save-dev
Copy the code

The configuration code is gulpfile.js

Var gulp = require('gulp'); // Define the default task gulp.task(' task name ', function() {// put your task's task code here}); Gulp.task ('default', [' task '])// Execute asynchronouslyCopy the code

Build command:
```
gulp
Copy the code
```

Use the gulp plug-in

Related plug-ins:
- Gulp-concat: Merge files (JS/CSS)
- Gulp-uglify: compresses JS files
- Gulp-rename: renames a file
- Gulp-less: compiles less
- Gulp-clean-css: compresses the CSS
- Gulp-livereload: Real-time automatic compilation refresh
Important API
- gulp.src(filePath/pathArr) :
  - Returns a file stream object that points to all files at the specified path
  - Used to read files
- gulp.dest(dirPath/pathArr)
  - Points to all folders specified
  - Use to output files to a folder
- gulp.task(name, [deps], fn)
  - Define a task
- gulp.watch()
  - Monitor file changes

Deal with js

Creating a JS file

src/js/test1.js

(function () { function add(num1, num2) { var num3 = 0; num1 = num2 + num3; return num1 + num2; } console.log(add(10, 30)); }) ();Copy the code

src/js/test2.js

Var arr = [2,3,4]. Map (function (item, index) {return item+1; }); console.log(arr); }) ();Copy the code

Download plug-ins:

npm install gulp-concat gulp-uglify gulp-rename --save-dev
Copy the code

The configuration code

var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); gulp.task('minifyjs', Function () {return gulp.src(' SRC /js/*.js') // Pipe (concat('built ')) // Merge into temporary file.pipe (gulp.dest('dist/js')) / / generated to the target folder. Pipe (rename ({suffix: 'min'})) / / rename. Pipe (uglify ()) / / compression pipe (gulp. Dest (' dist/js')); }); gulp.task('default', ['minifyjs']);Copy the code

The page introduces the JS browsing test: index.html

<script type="text/javascript" src="dist/js/built.min.js"></script>
Copy the code

Package test: gulp

With CSS

Create less/ CSS files

src/css/test1.css

#div1 {
  width: 100px;
  height: 100px;
  background: green;
}
Copy the code

src/css/test2.css

#div2 {
  width: 200px;
  height: 200px;
  background: blue;
}
Copy the code

src/less/test3.less

@base: yellow;
.index1 { color: @base; }
.index2 { color: green; }
Copy the code

Download plug-ins:

npm install gulp-less gulp-clean-css --save-dev 
Copy the code

The configuration code

var less = require('gulp-less'); var cleanCSS = require('gulp-clean-css'); Gulp. Task ('lessTask', function () { return gulp.src('src/less/*.less') .pipe(less()) .pipe(gulp.dest('src/css')); Gulp.task ('cssTask',['lessTask'], function () { return gulp.src('src/css/*.css') .pipe(concat('built.css')) .pipe(gulp.dest('dist/css')) .pipe(rename({suffix: '.min'})) .pipe(cleanCSS({compatibility: 'ie8'})) .pipe(gulp.dest('dist/css')); }); gulp.task('default', ['minifyjs', 'cssTask']);Copy the code

Page introduces CSS browsing test: index.html

<link rel="stylesheet" href="dist/css/built.min.css">
<div id="div1" class="index1">div1111111</div>
<div id="div2" class="index2">div2222222</div>
Copy the code

Package test: gulp

Handle HTML

Download plug-ins:

npm install gulp-htmlmin --save-dev
Copy the code

The configuration code

var htmlmin = require('gulp-htmlmin'); Gulp.task ('htmlMinify', function() {return gulp.src('index.html'). Pipe (htmlmin({collapseWhitespace: true})) .pipe(gulp.dest('dist')); }); gulp.task('default', ['minifyjs', 'cssTask', 'htmlMinify']);Copy the code

Modify page import

<link rel="stylesheet" href="css/built.min.css">
<script type="text/javascript" src="js/built.min.js"></script>
Copy the code

Package test: gulp

Automatic compilation

Download the plugin

npm install gulp-livereload --save-dev
Copy the code

Configuration code:

var livereload = require('gulp-livereload'); // All pipe.pipe (livereload()) gulp.task('watch', ['default'], function () {// enable livereload.listen(); / / monitor the specified file, and specify the corresponding processing tasks gulp. Watch (' SRC/js / *. Js' [' minifyjs']) gulp. Watch ([' SRC/CSS / *. CSS ', 'SRC/less / *. Less']. ['cssTask','lessTask']); });Copy the code

Hot loading (real-time loading)

Download the plugin: gulp-Connect

1, install gulp-connect --save-dev; Var connect = require('gulp-connect'); var connect = require('gulp-connect'); // All pipe.pipe (connect.reload()) // configure the loading option connect.server({root: 'dist/',// monitor the source target file path livereload: True,// whether to refresh port: 5000// enable port number}); // Automatically open the link open('http://localhost:5000'); // NPM install open --save-dev gulp.watch(' SRC /js/*.js', ['js']); // NPM install open --save-dev gulp.watch(' SRC /js/*.js', ['js']); gulp.watch(['src/css/*.css', 'src/css/*.less'], ['cssMin', 'less']);Copy the code

extension

Package and load the gulp plug-in
Prerequisite: Download the plug-in well.
Download the package: gulp-load-plugins
npm install gulp-load-plugins –save-dev
Var $= require(‘gulp-load-plugins’)(); !!!!!!!!! The imported plug-in is a method that you must remember to call.
Masterstroke: no more mods need to be introduced

Usage:

All plugins are elicited with $, and all other plugins have the same function name (the last part of the plugin name) : for example: concat,connect, csSMin... gulp.task('less', Function () {return gulp.src(' SRC /less/*.less').pipe($.less() Pipe (gulp. Dest ('/SRC/CSS)) / / will be converted to less output files under the SRC. The pipe ($. Livereload ()) / / real-time refresh. Pipe ($. Connect. Reload ()});Copy the code

2.Gulpfile.js file configuration:

var gulp = require('glup'); // var concat = require('glup-concat'); // var uglify = require('glup-uglify'); // var rename = require('glup-rename'); // var less = require('glup-less'); // var cleanCss = require('glup-clean-css'); // var htmlmin = require('gulp-htmlmin'); // var livereload = require('gulp-livereload'); // var connect = require('gulp-connect'); // var open = require('open'); var $ = require('gulp-load-plugins')(); // Pack and load gulp plugins. Gulp.task ('js', Function () {return gulp. SRC ('/SRC/js / * * *. Js') / / depth can traverse pipe ($. Concat (' build. Js)) / / temporary consolidation file, Pipe (gulp.dest('dist/js/')) // Specify the output directory to the local directory.pipe($.uglify()) // zip the file.pipe($.rename({suffix: 'min'})) / / rename the pipe (gulp. Dest (' dist/js)) / / output/again /. Pipe (livereload ()), pipe ($. Connect. Reload ()}); Gulp. Task ('less', Function () {return gulp.src(' SRC /less/*.less').pipe($.less()).pipe(gulp.dest(' SRC/CSS ') .pipe(livereload()) .pipe($.connect.reload()) }); Gulp.task (' CSS ', ['less'], function () { return gulp.src('src/css/*.css') .pipe($.concat('built.css')) .pipe(gulp.dest('dist/css')) .pipe($.rename({suffix: '.min'})) .pipe($.cleanCss({compatibility: 'ie8'})) .pipe(gulp.dest('dist/css')) // .pipe(livereload()) .pipe($.connect.reload()) }); Gulp.task (' HTML ', function () {return gulp.src('index.html'). Pipe ($.htmlmin({collapseWhitespace: true})) .pipe(gulp.dest('dist/')) // .pipe(livereload()) .pipe($.connect.reload()) }); Gulp.task ('watch', ['default'], function () {// Enable livereload.listen(); / / monitor the specified file, and specify the corresponding processing tasks gulp. Watch (' SRC/js / *. Js' [' js]) gulp. Watch ([' SRC/CSS / *. CSS ', 'SRC/less / *. Less'], [' CSS ', 'less']); }); Glup. task('server', ['default'], function () {// Configure server options $.connect.server({root: Dist /',// monitor source target file path livereload: true,// whether real-time refresh port: 5000// enable port number}); // Automatically open the link open('http://localhost:5000'); // NPM install open --save-dev gulp.watch(' SRC /js/*.js', ['js']); // NPM install open --save-dev gulp.watch(' SRC /js/*.js', ['js']); gulp.watch(['src/css/*.css', 'src/css/*.less'], ['css', 'less']); }); / / register the default task (asynchronously) gulp. Task (' default '[' js',' less ', 'CSS', 'HTML']);Copy the code

Related Posts

Create a Photo wall – a DIV component that can be dragged, panned, and scaled around any point

An overview of self – developed front – end error monitoring

Vue 2.0 features