Gulp学习笔记用自动化构建工具增强你的工作流程！gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

我也来挑战一下~~ 前端小白在学习

检查工作

node -v //命令行执行，检查node是否安装好 npm -v //命令行执行，检查npm是否安装好 提示: node 从4.x版本以后自带npm包管理器

安装淘宝镜像加速module的下载

npm install -g cnpm --registry=registry.npm.taobao.org

Gulp

中文官网

通过 gulp.task 注册一个任务；
通过 gulp.src 读取文件；
通过 gulp.dest 写入文件。
通过 gulp.watch 监听文件变化；
通过 gulp.run 执行任务；

gulp安装

注意： gulp要求全局和本地都要安装 cnpm install gulp@3.9.1 -g //全局安装 cnpm install gulp@3.9.1 -D //本地安装

-D 与 -S 的区别： -D后，安装包会在package中的 devDependencies对象中。简称dev。dev是在开发环境中要用到的。

-S后，安装包会在package中的 dependencies 对象中。简称dep。dep是在生产环境中要用到的。

体验gulp

在项目创建gulpfile.js，和node_modules同级在这里插入图片描述 注意：src/index.html 引入的是已经编译好的build/css 文件，不然没有样式喔

在gulpfile.js文件里：

第一步：引包前先安装插件（`按需引入喔！！`）

编译 less cnpm install --save-dev gulp-less@4.0.1

压缩 css cnpm install --save-dev gulp-cssmin@0.2.0

合并 cnpm install --save-dev gulp-concat@2.6.1

压缩 js cnpm install --save-dev gulp-uglify@3.0.1

压缩图片 cnpm install --save-dev gulp-imagemin@4.1.0

热更新 cnpm install --save-dev gulp-connect@5.6.1

const gulp = require('gulp')
const less = require('gulp-less')   //编译成css
const concat = require('gulp-concat')   //合并文件，注意文件的顺序
const cssmin = require('gulp-cssmin')   //压缩css文件
const uglify = require('gulp-uglify')   //压缩js文件
const imagemin = require('gulp-imagemin')  //压缩图片
const connect = require('gulp-connect')  //server服务

第二步：创建任务

// 建立myhtml（自定义名字）任务，要把src文件夹里的index.html转到build文件夹里
gulp.task('myhtml',function(){
    gulp.src('./src/index.html')    //起始位置
    .pipe(gulp.dest('./build'))     //终点位置
    //.pipe(gulp.dest('dist'))
})

build文件夹：包括所有的编译脚本

dist文件夹：包含了整个项目的编译结果（打包结果），可以作为发布版本

// 建立myless任务
gulp.task('myless',function(){
    gulp.src('./src/less/*.less')  // *代表所有的less文件
    .pipe(less())     //首先编译成为css
    .pipe(concat('all.css'))   //再合并为一个css文件
    .pipe(cssmin())   //最后压缩
    .pipe(gulp.dest('./build/css'))
    .pipe(connect.reload())  //热更新
})

// 建立myjs任务
gulp.task('myjs',function(){
    gulp.src('./src/js/*.js')
    .pipe(concat('main.js'))
    .pipe(uglify())     //压缩js文件
    .pipe(gulp.dest('./build/js'))
})

//建立myimg任务
gulp.task('myimg',function(){
    gulp.src('./src/images/*')  //*.{png,jpg,gif,ico}  指定图片类型
    .pipe(imagemin())    //图片压缩
    .pipe(gulp.dest('./build/images'))
})

//热更新
gulp.task('server',function () {
    connect.server({
        root:['./build'],//服务器管理/运行哪个目录(默认是项目的根目录)
        livereload:true,  //是否热更新。
        port:9999  //指定web服务的端口号（默认是8080）
    });
    gulp.watch('src/less/*',['myless']);
});

第三步：执行 gulp 任务名

例如：gulp myless；执行单个任务 gulp.task('default', ['myhtml', 'myless','myjs', 'myimg', 'server']);
或者 gulp.task('default',['all']); 表示所有任务一起执行

Gulp学习笔记