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

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

gulp基本使用流程

cnpm init      //或者改为npm指令

安装到项目文件夹：

cnpm install [email protected] --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"])