Learn gulp

Simple to understand gulp

In the daily development, we tend to use a lot of front-end configuration tools, we have a common Node, NPM, Grunt, Gulp ..., many, many, on a blog has a brief introduction npm, here again briefly explain gulp .

What is gulp

gulp is a front-end automation package build tool, mainly used to help us put the code compression, transcoding, gulp run must rely node environment.

1. gulp installation
   because gulp is a global tool, so the direct use npm install gulp tool ok. Of course, also be installed in the project gulp, look at individual needs.
   Global installation GULP: npm i -g GULP
   project installation GULP: npm i GULP
2. gulp detection
   detection gulp: gulp --version or gulp -v , the version number for the CLI version: 2.2.0 is right.
3. gulp unload
   input command npm uninstall --global gulp or npm un -g gulp to uninstalled

gulp methods

1. src()
  => 用来找到你要打包的文件的
  => src('你要打包的文件的地址')
  => 返回值就是一个 二进制流, 就可以继续去调用别的方法
2. pipe()
  => 用来帮你做事情的
  => pipe(你要做的事情)
  => 返回值: 又是一个二进制流, 可以继续使用方法
3. dest()
  => 用来写入文件的
  => 你要把已经压缩号的代码放在那一个文件夹里面
  => 如果没有你指定的文件夹, 会自动创建一个这个文件夹放进去
4. parallel()
  => 用来同时执行多个任务的
  => gulp.parallel(你定义好的任务1, 你定义好的任务2, ...)
  => 他就会把这个几个任务都给你执行了
  => 返回值: 是一个任务流
  => 只要这个返回值以执行, 就能把你准备好的几个任务同时开始执行
5. series()
  => 用来逐个执行多个任务的
  => gulp.series(任务1, 任务2, ...)
  => 返回值: 是一个任务流
  => 只要这个返回值一执行, 就能把你准备好的几个任务逐一完成
    -> 前一个任务完成在执行后面一个任务
6. watch()
  => 用来监控文件变化的
  => gulp.watch(你要监控的文件目录, 你要执行的任务)

gulp of third-party modules

Learn how to finish gulp of, let us look at how to import gulp in a variety of third-party modules and their role.
Here were gulp configuration package, the method mentioned above as well as below mentioned modules one by one to explain by writing project.

        1. 借助一些 gulp 的 API(方法) 来帮我们进行打包
          + 先在项目里面安装一个 gulp, 作为开发依赖使用
          + 把这个第三方模块导入进来
        2. 准备一个一个的书写打包规则了
          + 因为打包 css 和 打包js 和 打包 html 的规则肯定不一样
          + 所以我们要一个一个的书写
        3. 执行各种压缩代码的方式
          + 都是使用各种第三方模块
          + gulp-cssmin 第三方模块是专门用来压缩 css 文件的
            => 你需要下载, 导入, 使用
          + gulp-autoprefixer 第三方模块是专门用来给 css 自动添加前缀使用的
            => 你需要下载, 导入, 使用
          + gulp-uglify 第三方模块是专门用来压缩 js 文件的
            => 你需要下载, 导入, 使用
            => 注意: 这个第三方包不认识 es6 的语法, 不能转换压缩 es6 的语法
          + gulp-bable 第三方模块是专门用来把 es6 转换成 es5 使用的
            => 注意: 这个第三方还依赖了另外两个第三方包
              -> @babel/core 和 @babel/preset-env
            => 下载的时候需要下载三个包
              -> 导入的时候, 只要导入一个 gulp-babel 就可以了
          + gulp-htmlmin 第三方模块是专门用来压缩 html 文件的
            => 你需要下载, 导入, 使用
          + del 第三方模块是专门用来删除目录使用的
            => 你需要下载, 导入, 使用
          + gulp-webserver 第三方模块是专门用来开启服务器的
            => 你需要下载, 导入, 使用

First, prepare your projects and preparation before use,

pay attention: the project must have a name in English! ! Then you need to establish their own files, environment and record a third-party package package.js project file. Here is not demonstrated, I can not understand you check my blog npm of common commands, which have to explain.

gulp-cssmin Module: compress css file
you have created a test css file, and then perform compression instruction npm i -D gulp-cssmin

after executing compression instruction, we export this compression bar in gulpfile.js this js file inside, concrete steps following

the completion of the above steps, input terminal GULP css, we will put the following css file src compressed file to the dist Hereinafter, such a good css file compression would be placed under the directory dist.

gulp-autoprefixer used to automatically add a prefix css
step by step to keep up with almost executes instructions npm i -D gulp-autoprefixer in terminal here do not demonstrate, we follow the above presentation can do. Here the first suffix is not added css file which need to add a prefix code number,
then execute instructions GULP css terminal, can be found in the prefix code added css inside compressed file.

gulp-uglify Module: used to compress the file js
first input terminal command npm i -D gulp-uglify, installed environment, creating an original file js js test.js below

and enter the associated code folder gulpfile.js specific reference picture can, with reason as with the above steps,

We are here to mention that the current environment is not compressed code ES6, if you want to download compressed code ES6 have to gulp-babel of this third-party modules: npm i -D gulp-babel @ babel / Core @ babel / PRESET- env (triple), then introduced @ babel / nev, the same as the above picture circled. If not resolved for ES6, can be removed out of the circle part, a code amount reduced. Finally, the direct input terminal gulp js instruction, can thus compressed.

gulp-htmlmin module: used to compress html file
is also the first to establish a good export codes (because it is not a long shot, so we put the two together)


because I'm used to the html file in the folder inside pages, first create a folder inside the pages a index.html file,

and then remember to input the instruction terminal NPM-I -D htmlmin GULP , then enter compressed instructions GULP HTML .

images GULP : moving images file, mainly used to move images and entire folders ( GULP folder name ), the truth is approximately the same with the above, note: move files without downloading xx.xxmin compression template,

• Moving Pictures

• Move Folder

Here, you will not feel a module slowly to export a very troublesome, usually we tend to need a lot of third-party modules during development, so our efficiency will be a lot slower. So now we need a method to export all at once, that is, parallel method gulp method mentioned above and the series method.

Parallel () : used to simultaneously perform multiple tasks
First, we first used to hold compressed package dist folder to delete

and then export the task of writing a

final open terminal gulpfile console, enter the command gulp default, and then will follow we derive a sequence of tasks an export, the first to complete the first one who will end.

Dist automatically creates a new file in the project after the implementation of the following folder to save.

series : a plurality of tasks for execution by one
step as with the above, the method may be parallelp series into
the execution instruction, the terminal so that it will follow a order of the code to download a file

del modules: to delete a directory

First, download del terminal module: npm i -D del

then the code introduced del This module

then enter the code to execute code inside

because we thought should be in the normal development before compression css / js / html first dist directory deleted, to be after the removal is complete dist, in the compression execution css / js / html / ... like the transfer task. So here I am done with the del command and default.

Finally, enter the terminal and then delete command: GULP

• Small detail: When you're at the command line gulp default, you can not write default
  you gulp this command line instruction is in default in the execution gulp
  
  gulp-webserver : to turn on the server
  in the terminal to download this module: npm i -D gulp-webserver
  
  introduced npm i -D gulp-webserver the third-party modules and executed.
  
  
  Then serverHandler task to export tasks.
  
  Turning on the server you want on your computer, you have saved on your computer address that you want to open:
  My Computer -> C: -> windows - > syatem32 -> drivers -> etc -> hosts
  then add their own defined later the domain name on it.
  
  Then to enter the terminal command: gulp, you can open your own pages.
  

Attached below is extracted all the way code and tutorial files Tutorial:

链接：https://pan.baidu.com/s/1FD04bEl1-W9Pa-wpa9Gwww 
提取码：llmc

// 1.导入 gulp 这个第三方模块
const gulp = require('gulp')

// 2.导入 gulp-cssmin 这个第三方模块
const cssmin = require('gulp-cssmin')

// 2-2. 导入 gulp-autoprefixer 这个第三方模块
const autoprefixer = require('gulp-autoprefixer')

// 3. 导入 gulp-uglify 这个第三方模块
const uglify = require('gulp-uglify')

// 3-2. 导入 gulp-babel 这个第三方模块
const babel = require('gulp-babel')

// 4.导入 gulp-htmlmin 第三模块
const htmlmin = require('gulp-htmlmin')

// 5. 导入 del 这个第三方模块
//    导入以后你会得到一个函数
//    不需要和 gulp 产生关联
//    直接使用就可以删除内容
const del = require('del')

// 6. 导入 gulp-webserver 这个第三方模块
//    导入以后可以得到一个函数
const webserver = require('gulp-webserver')


// 2.写一个打包css的方法
const cssHandler = () => {
    return gulp.src('./src/css/*.css') //找到src目录下css目录下所有后缀为css的文件
        .pipe(autoprefixer({
            browsers: ['last 2 versions']//兼容最近的两个版本
        }))
        .pipe(cssmin()) //压缩css代码
        .pipe(gulp.dest('./dist/css'))//压缩完毕放入指定dist下的css文件夹里面
}

// 3.打包js的方法
const jsHandler = () => {
    return gulp.src('./src/js/*.js')//找到js文件
        .pipe(babel({
            presets: ['@babel/env']
        }))//把ES6转码成ES5，就可以压缩了
        .pipe(uglify())//压缩
        .pipe(gulp.dest('./dist/js'))//把压缩完毕的js文件放入文件夹
}

// 4.书写一个打包html的方法
const htmlHandler = () => {
    return gulp.src('./src/pages/*.html')//找到要压缩的html文件
        .pipe(htmlmin({//想进行压缩，需要在这个对象里面进行配对
            removeAttributeQuotes: true,//移除属性上面的双引号
            removeComments: true,//移除注释
            collapseBooleanAttributes: true,//把值为布尔值的属性简写
            collapseWhitespace: true, // 移除所有空格, 变成一行代码
            minifyCSS: true,//把页面里面的style标签里面的css样式去空格
            minifyJS: true,//把页面里面的script标签里面的css样式去空格
        }))//压缩
        .pipe(gulp.dest('./dist/pages'))//把压缩完毕的项目放在一个指定目录
}

// 5.书写一个移动images文件的方法
const imgHandler = () =>{
    return gulp.src('./src/images/**')//images下的所有文件
                .pipe(gulp.dest('./dist/images'))//放在指定目录
}

//6.书写一个移动lib文件的方法
const libHandler= ()=>{
    return gulp.src('./src/lib/**')
                .pipe(gulp.dest('./dist/lib'))
}

// 7.书写一个自动删除dist目录
const delHandler = () =>{
    return del(['./dist'])
}


// 8. 书写一个配置服务器的任务
const serverHandler = () => {
    // 要把页面在服务器上打开
    // 打开的是 dist 目录里面我已经压缩好的页面
    return gulp.src('./dist') // 找到我要打开的页面的文件夹, 把这个文件夹当作网站根目录
               .pipe(webserver({ // 需要一些配置项
                 host: 'www.bielaiwuyang.com', // 域名, 这个域名可以自定义
                 port: 8080, // 端口号, 0 ~ 65535, 尽量不适用 0 ~ 1023
                 open: './pages/index.html', // 你默认打开的首页, 从 dist 下面的目录开始书写
                 livereload: true, // 自动刷新浏览器 - 热重启
               })) // 开启服务器
  }


// 8.导出一个默认任务
// module.exports.default = gulp.series(cssHandler,jsHandler,htmlHandler,libHandler,imgHandler)
module.exports.default = gulp.series(
    delHandler,
    gulp.parallel(cssHandler,jsHandler,htmlHandler,libHandler,imgHandler),
    serverHandler
    )

    

// 导出方法
// module.exports.css = cssHandler
// module.exports.js = jsHandler
// module.exports.html = htmlHandler
// module.exports.images = imgHandler
// module.exports.lib = libHandler

At home against the war, fearless epidemic, refueling Wuhan, China refueling, humans win! ! !

Instructor: Guo Xiang