gulp学习笔记，基本使用流程，基本函数，使用监听、插件

学习gulp的简单笔记。原教学视频：https://www.bilibili.com/video/BV1NE411T7Z2?p=396。

gulp基本使用流程

cnpm init      //或者改为npm指令

安装到项目文件夹：

cnpm install gulp@3.9.1 --save-dev
cnpm i gulp-scss gulp-minify-css gulp-rename -D    //一次下载多个第三方插件

创建一个gulpfile.js文件
在gulpfile.js文件中编写任务

(全局配置好命令行工具，之后会多出gulp命令行任务）
```
cnpm install gulp-cli -g
```
在控制台通过 gulp 任务名，运行编写好的任务

common.Js规范使用模块

1.require() 将这个模块引入

2.使用这个模块上的函数

const gulp = require('gulp');  //引入一个gulp函数库
//编写第一个任务
//参数1：任务的名字，自定义    参数2：回调函数，任务执行的功能
gulp.task('hello',function(){})

gulp基本函数

gulp.src()    //找到源文件路径
gulp.dest()    //找到目标文件路径，如果该文件路径不存在则会自动创建
gulp.task()    //建立gulp任务
gulp.watch()    //监控文件的变化
.pipe()    //理解程序运行管道

使用实例
const gulp = require('gulp');  //引入一个gulp函数库
gulp.task('hello',function(){       //建立任务gulp.src("./src/css/base.css")    //获取要处理的文件.pipe(gulp.dest("./dist/css"));   //放入指定文件夹
})

gulp使用监听

gulp.task("watch",function(){gulp.watch()
//第一个参数：文件监听的路径；    第二个参数：要执行的任务
})

gulp使用插件

网址：gulp插件

使用步骤：

<1> 下载插件到本地

cnpm install 插件名 --save-dev

<2>通过require() 引入文件

<3>查阅插件用法并使用

压缩html (gulp-htmlmin)

压缩css (gulp-csso)

重命名插件 (gulp-rename)

处理js文件插件

gulp-conact 合并文件
gulp-uglify 压缩js 文件
gulp-babel ES6=>ES5语法转换

公共文件包含 (gulp-file-include)

启动服务器 (gulp-connect)

const connect=require("gulp-connect");
gulp.task("server",function(){connect.server({root:"dist",  //设置根目录port:8000,//livereload:true  //启动实时刷新})
})

package.json文件

项目依赖：

在项目的开发阶段和线上运营阶段，都需要依赖的第三方包。

使用npm install 包名命令下载的文件会默认被添加到package.json文件的dependencies字段中。

重新安装时使用 npm i --production 可以只下载项目依赖。

开发依赖：

在项目的开发阶段需要依赖，线上运营阶段不需要的第三方包。

使用npm install 包名 --save-dev命令将包添加到package.json文件的devDependencies字段中。

使用 npm install 会重新下载所有依赖。

package-lock.json

用于记录模块与模块之间复杂的依赖关系。

锁定包的版本，确保再次下载时不会因为包版本不同而产生问题。
加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可。

一份我的gulpfile.js文件实例

//注意node和gulp版本，版本冲突可能会发生错误，我使用的是3.9.1版本gulp和10.22.0版本node
const gulp=require('gulp');
const htmlmin=require('gulp-htmlmin');
const fileinclude=require('gulp-file-include');
const rename=require('gulp-rename');
const sass = require('gulp-sass');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const imgmin=require('gulp-imagemin');
const connect = require('gulp-connect');//报错处理函数
function showError(error) {console.log(error.toString());this.emit('end');
}
//html文件压缩
gulp.task("htmlmin",function(){gulp.src("src/*.html").pipe(fileinclude()).on('error', showError).pipe(htmlmin({ collapseWhitespace: true })).on('error', showError).pipe(gulp.dest("./dist"));
})
//css代码压缩
gulp.task("cssmin",function(){return gulp.src(["src/css/*.scss","src/css/*.css"]).pipe(sass()).on('error', showError).pipe(csso()).on('error', showError)
/*     .pipe(rename({suffix:".min"})) */.pipe(gulp.dest("./dist/css"));
})
//js语法转换及代码压缩
gulp.task('jsmin', function ()  {return gulp.src('./src/js/*.js').pipe(babel({//可以判断当前代码运行环境并将代码转化为当前运行环境支持的代码presets: ['@babel/env']})).on('error', showError).pipe(uglify()).on('error', showError)
/*         .pipe(rename({suffix:".min"})) */.pipe(gulp.dest('./dist/js'));})
gulp.task('jsmin-module', function ()  {return gulp.src('./src/js/modules/*.js').pipe(babel({//可以判断当前代码运行环境并将代码转化为当前运行环境支持的代码presets: ['@babel/env']})).on('error', showError).pipe(uglify()).on('error', showError)
/*         .pipe(rename({suffix:".min"})) */.pipe(gulp.dest('./dist/js/modules'));
})
//图片拷贝处理
gulp.task("images", function(){gulp.src('./src/img/*')//.pipe(imgmin()).pipe(gulp.dest("./dist/img"));
})
//服务器任务
gulp.task("server", function ()  {connect.server({root: "./dist/",port: 5500,livereload: true})
})
//监听任务
gulp.task("watch", function() {gulp.watch("./src/*.html", ["htmlmin"]);gulp.watch("./src/common/*.html", ["htmlmin"]);gulp.watch("./src/css/*.css",["cssmin"]);gulp.watch("./src/css/*.scss",["cssmin"]);gulp.watch("./src/js/*.js",["jsmin"]);gulp.watch("./src/js/modules/*.js",["jsmin-module"]);gulp.watch("./src/img/*", ["images"]);
})
gulp.task("build",['htmlmin','cssmin','jsmin','jsmin-module','images','server',"watch"])

gulp学习笔记，基本使用流程，基本函数，使用监听、插件相关推荐

Bootstrap 学习笔记8 下拉菜单滚动监听
代码部分: <nav class="navbar navbar-default"><a href="#" class="navbar ...
ROS2学习笔记22--使用launch启动／监听多个node节点
概要:这篇内容主要介绍如何使用launch启动/监听多个node节点环境:ubuntu20.04,ros2-foxy,vscode 最后如果没有陈述实操过程中碰到问题的话,则表示该章节都可被本人正常 ...
oracle10g无监听配置文件,Oracle 10g学习笔记（七） tnsnames.ora 监听配置文件详解
监听配置文件为了使得外部进程如 CAMS后台程序能够访问 Oracle 数据库必须配置 Oracle 网络服务器环境配置 Oracle 网络服务器环境是通过配置 listener.ora ...
html 流程控制,HTML5独家分享：原生JS学习笔记2——程序流程控制
当当当当 .....楼主又来了!新一期的js学习笔记2--程序流程控制更新了! 想一键获取全部js学习笔记的可以给楼主留言哦! js中的程序控制语句常见的程序有三种执行结构: 1.顺序结构 2.分支 ...
LIteOS学习笔记-7LiteOS启动流程与编译流程
LIteOS学习笔记-7LiteOS启动流程与编译流程 LiteOS启动流程 1. 启动方式 2. 启动流程硬件初始化内核初始化调试串口初始化尝试进行网络连接启动任务调度 LiteOS编译流 ...
小猫爪：i.MX RT1050学习笔记16-启动流程（Boot Flow）
小猫爪:i.MX RT1050学习笔记16-启动流程(Boot Flow) 1 前言 2 bootROM的流程 2.1低功耗唤醒启动 2.2 正常启动 2.2.1 Serial Download 2. ...
gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
一.gulp.watch()功能介绍举例说明:当'./src/*.html'发生变化时,执行'html'任务,同时刷新浏览器.如下: gulp.task('watch', function(){gu ...
Vue学习（二）动态绑定与事件监听
v-bind&v-on Day1 文章目录 v-bind&v-on 前言一.V-bind 1.简单实现 2.Class的绑定 2.1对象绑定 2.2数组绑定 3.style的绑定 3 ...
shell脚本编程学习笔记8(XDL)——流程控制和循环
shell脚本编程学习笔记8--流程控制和循环 1,if语句 1,框架 1,单分支:if [条件判断式] ;thenprogramfiif [条件判断式]thenprogramfi注意:if语句使用f ...