【任务执行工具】gulp入门

已于 2023-03-16 10:02:49 修改
阅读量487 收藏
点赞数 1
分类专栏： 前端学习 文章标签： gulp javascript 前端
于 2023-03-10 14:06:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/menghen113/article/details/129441498
版权

gulp配置

目录

了解glup

  • 前端自动化打包构建工具

    • 打包：把文件压缩，整合，移动，混淆

  • 了解一下前端的打包构建工具

    • gulp:基于流的打包构建工具
    • webpack:基于js文件的打包构建工具

  • 声明是流

    • 流文件：流
      • 一种文件传输的格式
      • 一段一段的文件传输
    • 流格式：流
      • 从头到尾的一个过程
      • 需要从 源 开始一步一步经过加工
        • 每一个步骤需要依赖上一步的结果
        • 最终给出一个完整的成品
      • gulp是基于流格式的一种打包构建工具

  • gulp的依赖环境

    • 依赖于node环境进行开发
    • 底层封装的内容就是node里面的读写文件（http和fs）

  • gulp的作用

    • 对于css文件
      • 压缩
      • 转码（自动添加前缀）
    • 对于js文件
      • 压缩
      • 转码（ES6转ES5)
    • 对于html文件
      • 压缩
      • 转码（对格式的转换）
    • 对于静态资源文件的处理
    • 对于第三方文件的处理
    • …

  • gulp的安装

    • 是一个JavaScript相关的工具

    • 就可以直接使用npm进行安装

    • 需要安装在你的电脑环境里面，一次安装多次使用

    • 打开命令行，输入指令

      • $ npm install --global gulp

  • gulp的检测

    • 打开命令行，输入指令
      • $ gulp --version

  • gulp的卸载

    • 打开命令行，输入指令
      • $ npm uninstall --global gulp

  • gulp的版本

    • gulp@3

      • 安装成功检测版本号，gulp 3.9.1

    • gulp@4

      • 安装成功检测版本号，gulp cli 2.2.0

  • gulp全局工具安装完毕

    • 能给你的电脑提供一个启动gulp的环境
    • 私人：可以在cmd里面运行 gulp xxx的指令

准备使用gulp

作用：帮我们打包自己的项目

  1. 准备一个项目

    • 需求：
      • 你要确定好自己的目录结构
      • 你要分开源码和打包以后的内容
    • 确定自己的目录结构
      • xiaomi
        • src 源码
          • pages html
          • css css
          • js js
          • sass sass
          • images 图片
          • videos 视频
          • audios 音频
          • lib 第三方文件（jquery,swiper,…）
          • fonts 字体图标文件

  2. 准备一个 gulpfile.js的文件

    • 必须有
    • gulp进行打包的依据
    • 每个项目需要一个gulpfile.js
    • 我们在这个文件里面进行本项目的打包配置
    • gulp再运行的时候，会自动读取 gulpfile.js文件里面的配置
    • 按照你在gulpfile.js文件里面的配置进行打包工作
    • 注意：直接写在项目根目录，和src同级

  3. 在项目里面再次安装 gulp

    • 注意：项目里面的gulp是以第三方模块的形式出现的
    • 专门给你提供配置打包流程的API的
    • 每一个项目都要安装一次
    • 打开命令行，切换到项目目录
      • 输入指令 $ npm install gulp
属性我本项目的打包配置流程
按照gulp的语法来进行配置
gulp指令运行的时候才会认识

  1. 在 gulpfile.js 里面属性配置文件

    • 书写你该项目的打包流程
    • 书写完毕以后，按照打包流程去执行 gulp 指令运行 gulpfile.js 文件

  2. 源码和打包以后的内容

    • pages/index.html 开发源码

    • 打包完毕放在哪？

      • 同级目录下，再次新建一个叫做pages的文件夹

        • 不行？不能创建同名文件夹

      • 统计目录下，创建一个叫做views的文件

        • 不行？

    • 必须要保证打包前后的目录结构一致

      • 创建一个叫做src的目录（表示源码）
      • 创建一个叫做dist的目录（存放打包后的文件）

  3. gulp

    • 全局依赖环境 gulp

      • 一台电脑安装一次，以后使用就可以了

      • 在命令行提供 gulp xxx 的能力

      • 指令 $ npm install --global gulp

      • 项目依赖第三方

        • 每一个项目都要安装一次

        • 作为第三方包出现，在你导入以后，可以使用 gulp.xxx()方法

        • 切换到项目目录，输入指令 $ npm install gulp

  4. package.json 记录的第三方依赖

    • dependecies
      • 表示你项目的 项目依赖
      • 比如 jquery,swiper
      • 指项目运行需要用到的内容，将来上线以后也需要用到的内容
    • devDependencies
      • 表示的你项目的 开发依赖
      • 比如 gulp
      • 指项目开发阶段需要用到的内容，将来上线以后不需要用到的
    • gulp 第三方包最后是放在 devDependencies
      • 在你安装第三方依赖的时候，属性 $ npm install --dev 包名
      • 就会把依赖记录在 devDependencies

gulp的常用API

前提：下载gulp第三方，导入以后使用

1.gulp.task()

语法：gulp.task(任务名称，任务处理函数)

作用：创建一个基于流的任务

例子：

gulp.task('htmlHandler',function(){
	//找到html源文件，进行压缩，打包，放入指定目录
})

2.gulp.src()

语法：gulp.src(路径信息)

作用：找到源文件

书写方式：

2-1. gulp.src('./a/b.html')

​	找到指定一个文件

2-2.gulp.src('./a/*.html')

​	找到指定目录下，指定后缀的文件

2-3.gulp.src('./a/**')

​	找到指定目录下的所有文件

2-4.gulp.src('./a/** /*')

​	找到a目录下的所有子目录里面的所有文件

2-5.gulp.src('./a/** /*.html')

​	找到a目录下的所有子目录里面的所有 .html 文件

3.gulp.dest()

语法：gulp.dest(路径信息)

作用：把一个内容放在指定目录内

例子：

gulp.dest('./abc')

​	把它接收到的内容放在abc目录下

4.gulp.watch()

语法:gulp.watch(路径信息，任务名称)

作用：监控指定目录下的文件，一旦发生变化，重新执行后面的任务

例子：

gulp.watch('./src/pages/*.html',htmlHandler)

​	当指定目录下的html文件发送变化，就会执行 htmlHandler这个任务

5.gulp.series()

语法：gulp.series(任务1，任务2，任务3，…)

作用：逐个执行多个任务，前一个任务结束，第二个任务开始

6.gulp.parallel()

语法：gulp.parallel(任务，任务2，任务3，…)

作用：并行开始多个任务

7.pipe()

管道函数

所有的gulp API 都是基于流

接收当前流，进入下一个流过程的管道函数

例子：

gulp.src().pipe(压缩任务).pipe(转码).pipe(gulp.dest(‘abc’))

gulp 常用插件

gulp的各种插件就是用来执行各种各样的压缩混淆转码任务的

1.gulp-cssmin

  • 下载：npm i gulp-cssmin -D
  • 导入：const cssmin=require(‘gulp-cssmin’)
  • 导入以后得到一个处理流文件的函数
  • 直接在管道函数里面执行就好了

执行一个gulp配置好的任务

直接打开命令行，切换到 gulpfile.js所在的目录

执行指令 $ gulp 任务名称

2. gulp-autoprefixer

  • 下载：npm i gulp-autoprefixer -D
  • 导入：const autoPrefixer = require(‘gulp-autoprefixer’)
  • 导入以后得到一个处理流文件的函数
  • 直接在管道函数里面使用，需要传递参数
    • { browsers : [要兼容的浏览器]}

3.gulp-sass

  • 下载：npm i gulp-sass -D（报错试试npm install --save-dev gulp@3.9.1）
  • 很容易报错，基本下载不成功
  • 为什么：因为 gulp-sass 依赖另一个第三方，node-sass
    • node-sass 很难下载成功
    • 以前都是在同一个地方下载，后来node-sass 自己单独有一个下载地址
    • 如果你不进行单独的 node-sass 下载地址配置，就很容易失败
  • 解决：给node-sass 单独配置一个下载地址
    • 下载 node-sass 从这个单独的地址下载，下载其他的东西还是统一地址
  • node-sass 单独下载地址
    • $ set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
    • 单独配置一个下载地址，只要下载 node-sass 的时候会使用
  • 过程
    • $ set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
    • $ npm i node-sass -D
    • $ npm i gulp-sass -D
  • 导入：const sass = require(‘gulp-sass’)
  • 导入以后得到一个可以处理流文件的函数，直接再管道函数里面执行就可以了。

4.gulp-ugfity

  • 把 JS 文件压缩的
  • 下载：npm i -D gulp-uglify
  • 导入：const ugfity = require(‘gulp-uglify’)
  • 导入以后得到一个可以处理流文件的函数
  • 直接再管道函数中使用就可以了
  • 注意：你不能写ES6 语法，一旦有了ES6语法就会报错（现在不会）

5.gulp-babel

  • 专门进行 ES6 转 ES5 的插件
  • gubel-babel的版本
    • gulp-babel@7:大部分使用在 gulp@3 里面
    • gulp-babel@8:大部分使用在 gulp@4 里面
  • 下载：
    • gulp-babel 需要依赖另外两个包，我们要一起下载
    • 另外两个包 ：@babel/core @babel/preset-env
  • 导入：
    • 只要导入一个包就可以了，他会自动导入另外两个包
    • const babel = require(‘gulp-babel’)
  • 导入以后得到一个可以处理流文件的函数
  • 直接再管道函数内部使用，需要传递参数

6.gulp-htmlmin

下载：npm i -D gulp-htmlmin

导入：const htmlmin = require(‘gulp-htmlmin’)

导入以后得到一个可以处理流文件的函数

直接再管道函数里面调用，需要传递参数

7.del

下载：npm i -D del@5

作用：删除文件目录

导入：const del = require(‘del’)

导入以后得到一个函数，直接使用传递参数就可以了

8.gulp-webserver

作用：启动一个基于 node 属性的服务器

下载：npm i -D gulp-webserver

导入：const webserver = require(‘gulp-webserver’)

导入以后得到一个处理流文件的函数

我们在管道函数内调用就可以了，需要传递参数

gulp 打包组件

场景：

  • 把重复的位置单独拿出来，写成一个 html 片段
  • 单独拿出来的片段可以包含 css 和 js
    • 也可以不包含
  • 当我压缩 html的时候
  • 能再固定位置把我写好的 html 片段引入进来

组件

  • 一段可以包含(css / js)一整套 html 结构片段
  • 把页面的每一部分分成一段一段的 html 片段
  • 最后组装在一起

gulp-file-include

作用：在一个html页面里面导入一个 html 片段

下载：npm i -D gulp-file-include

导入：const fileInclude = require(‘gulp-file-include’)

导入之后得到一个处理流文件的函数

我们在管道函数内调用就可以了，需要传递参数

gulpfile.js

//因为gulp是依赖于node环境运行的
//将来的运行也是以node为继承运行的
//书写gulpfile.js文件就按照node的模块化语法进行书写(CommonJS)

//0-1.导入gulp
const gulp=require('gulp')
//0-2.导入 gulp-cssmin
const cssmin=require('gulp-cssmin')
//0-3.导入 gulp-autoprefixer
const autoprefixer=require('gulp-autoprefixer')
//0-4.导入 gulp-sass
const sass = require('gulp-sass')
//0-5 导入gulp-uglify
const uglify = require('gulp-uglify')
//0-6 导入 gulp-babel
const babel = require('gulp-babel')
//0-7 导入gulp-htmlmin
const htmlmin = require('gulp-htmlmin')
//0-8 导入 del
const del = require('del')
//0-9 导入gulp-web-server
const webserver = require('gulp-webserver')
//0-10 导入 gulp-file-include
const fileInclude = require('gulp-file-include')

//1.创建一个打包css的任务
// gulp@3的标准书写语法
// gulp.task('cssHandler',function(){
//   //需要捕获到给任务的结束，需要把这个流return 出去，
//   //task就会处理流
//   return gulp
//   .src('./src/css/*.css')//1-1.找到源文件
//   .pipe(cssmin())        //1-2.压缩文件
//   .pipe(gulp.dest('./dist/css/'))//1-3.把压缩好的内容放在指定目录下
// })

//1.创建任务
//1-1.创建一个打包css的任务
//  gulp@4 的标准书写，需要在 gulpfile.js 文件里面把这个函数名导出
const cssHandler=function(){
  return gulp
  .src('./src/css/*.css') //1.找到内容
  .pipe(autoprefixer())   //2.自动添加前缀
  .pipe(cssmin())         //3.压缩
  .pipe(gulp.dest('./dist/css'))//4.放到指定目录
}

//1-2.创建一个打包sass文件的任务
const sassHandler = function(){
  return gulp
  .src('./src/sass/*.scss')
  .pipe(sass())
  .pipe(autoprefixer())
  .pipe(cssmin())
  .pipe(gulp.dest('./dist/sass/'))
}

//1-3 创建一个打包js文件的任务
const jsHandler = function(){
  return gulp
    .src('./src/js/*.js') //1.找到js文件
    .pipe(babel({
      //babel@7, presets:['es2015']
      presets:['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js/'))
}

//1-4.创建一个打包 html 文件的任务
const htmlHandler = function(){
  return gulp
  .src('./src/pages/*.html')
  .pipe(fileInclude({
    prefix:'@-@',//你自定义的一个标识符
    basepath:'./src/components'//基准目录，你的组件文件在哪个目录
  }))
  .pipe(htmlmin({//通过你配置的参数来进行压缩
    // collapseWhitespace:true,//表示移除空格
    removeEmptyAttributes:true,//表示移除空的书写(仅限于原生属性)
    collapseBooleanAttributes:true,//移除checked类似的布尔值属性
    removeAttributeQuotes:true,//移除属性上的双引号
    minifyCSS:true,//压缩内嵌式css代码(只能基本压缩，不能自动添加前缀)
    minifyJS:true,//压缩内嵌式JS代码(只能基本压缩，不能进行转码)
    removeStyleLinkTypeAttributes:true,//移除style和link标签上的type
    removeScriptTypeAttributes:true//移除script标签上默认的属性
  }))
  .pipe(gulp.dest('./dist/pages/'))
}

//1-5.创建一个打包images 文件的任务
const imgHandler = function () {
  return gulp
    .src('./src/images/**')
    .pipe(gulp.dest('./dist/images'))
}

//1-6.创建一个打包video文件的任务
const videoHandler = function(){
  return gulp
    .src('./src/videos/**')
    .pipe(gulp.dest('./dist/videos/'))
}

//1-7.创建一个打包audios文件的任务
const audioHandler = function(){
  return gulp
    .src('./src/audios/**')
    .pipe(gulp.dest('./dist/audios/'))
}

//1-8.创建一个打包 第三方的任务
const libHandler =function(){
  return gulp
    .src('./src/lib/**/*')
    .pipe(gulp.dest('./dist/lib/'))
}

//1-9.创建一个打包 fonts 文件的任务
const fontHandler = function(){
  return gulp
    .src('./src/fonts/**/*')
    .pipe(gulp.dest('./dist/fonts/'))
}

//1-10.创建一个删除 dist 目录的任务
const delHandler = function(){
  //del 直接执行就可以了，不需要流
  //参数以数组的形式传递你要删除的文件夹
  return del(['./dist/'])
}

//1-11.创建一个启动 服务器的任务
const webHandler=function(){
  return gulp
    .src('./dist')
    .pipe(webserver({
      host:'localhost',//域名(可以配置自定义域名)
      port:'8080',//端口号
      livereload:true,//当文件修改的时候，是否自动刷新页面
      open:'./pages/index.html',//默认打开哪一个文件(从dist 目录以后)
      proxies:[//配置你的所有代理
      //每一个代理就是一个对象数据类型
      //注意：如果你没有代理，不要写空对象
      {
        //代理标识符
        source:'/dt',
        //代理目标地址
        target:'https://www.duitang.com/npi/blog/list/by_filter_id'
      }
    ]
    }))
}

//1-12. 创建一个健康任务
const watchHandler=function(){
  //使用 gulp.watch()
  gulp.watch('./src/css/*.css',cssHandler)
  gulp.watch('./src/js/*.js',jsHandler)
  gulp.watch('./src/pages/*.html',htmlHandler)
}

//2.导出任务
//2-1.导出打包 css 的任务
module.exports.cssHandler=cssHandler
//2-2 导出打包 sass 的任务
module.exports.sassHandler=sassHandler
//2-3.导出打包js的任务
module.exports.jsHandler=jsHandler
//2-4.导出打包html的任务
module.exports.htmlHandler=htmlHandler
//2-5.导出打包images的任务
module.exports.imgHandler=imgHandler
//2-6.导出打包 videos 的任务
module.exports.videoHandler=videoHandler
//2-7.导出打包 audios 的任务
module.exports.audioHandler=audioHandler
//2-8.导出打包 第三方 的任务
module.exports.libHandler=libHandler
//2-9.导出打包 fonts 的任务
module.exports.fontHandler=fontHandler
//2-10.导出删除 dist 目录的任务
module.exports.delHandler=delHandler

// 3. 配置一个默认任务
//  默认任务的作用就是把所有任务一起执行了
//  要么使用 gulp.series(),要么使用 gulp.parallel()
//  这两个方法的返回值是一个函数，返回值可以直接被当作任务函数使用
//  使用 task 的方式创建一个default 任务
//方式1：
// gulp.task('default',() => {})
//方式2：
// module.exports.default = () => {}

//创建一个默认任务
// module.exports.default = gulp.parallel(cssHandler,jsHandler,htmlHandler,imgHandler,videoHandler,audioHandler,libHandler,fontHandler)

// 添加完删除 dist 目录的任务，修改 default 任务
// module.exports.default = gulp.series(
//   delHandler,
//   gulp.parallel(cssHandler,jsHandler,htmlHandler,imgHandler,videoHandler,audioHandler,libHandler,fontHandler)
// )

//添加完毕服务器任务以后，修改 default 任务
// module.exports.default = gulp.series(
//   delHandler,
//   gulp.parallel(cssHandler,jsHandler,htmlHandler,imgHandler,videoHandler,audioHandler,libHandler,fontHandler),
//   webHandler
// )

//添加完毕键控任务之后，修改 default 任务
module.exports.default = gulp.series(
  delHandler,
  gulp.parallel(cssHandler,jsHandler,htmlHandler,imgHandler,videoHandler,audioHandler,libHandler,fontHandler),
  webHandler,
  watchHandler
)
/*
  sass 转换的问题
  * 有一个电脑上的工具叫做 sass
    => 可以转换和编译 sass 文件为 css 文件
  * gulp 里面配置一个任务，也可以转换 sass 文件

  * 写项目的时候使用哪一个?
    => 如果你需要使用 gulp 来配置你的项目，那么不需要使用 sass 工具
    => 如果你不需要使用 gulp 来配置你的项目，那么就需要使用 sass 工具

  * 写项目不要多个工具（完成一个工作的多个工具)混着使用
*/

/*
  sass转码使用
  * 有一种方式叫做 导入sass文件
  * 如果你需要用到导入
  * 你可以把变量和混合器定义在 .sass 后缀的文件中
   => 你的gulp配置的只会转码 .scss 文件
   => 你设置的变量和混合器文件不会被转码
  * 但是，当他转码 .scss文件的时候，会自动读取 .sass 文件里面的变量
   => 会给你解析以后使用
*/

/*
  图片问题
    * 在开发环境中
    * 图片是不需要我们压缩的
      => 直接使用线上地址
      => 图片是UI处理好给我们的
    * gulp-imagemin
      => 专门用来压缩图片(无损压缩)
      => 下载需要很好的网络环境
      => 压缩程度最高是7级,1024K 变成1023K
*/

/*
默认任务为什么一定要叫做 default
  * 因为你使用 gulp 指令的时候
    =>应该是 $ gulp 任务名称
  * 当你有一个叫做 default 的任务的时候
    =>你可以直接执行指令 $ gulp
    =>他会自动去指定你 gulpfile.js 文件中的 default 任务
 */

/**
 * 为什么会多一个文件
 *  * 我们在执行gulp 任务的时候
 *  * 不会进行文件夹清理的
 *  * 都是按照当前的 src 目录，和你配置的内容进行打包
 *  * 放在你指定的目录，如果这个目录已经存在，那么直接放进去
 *  * 如果这个目录不存在，就会创建一个目录再放进去
 * 
 * 
 * 当我们第二次修改名称以后打包
 * * 本身 dist/css 里面就有一个 index.css 的文件
 * * 又打包了一个 abcd.css 的文件，发现 dist/css 目录存在，就直接放进去
 * * 所有就会出现两个文件同时存在
 * 
 * 
 * 需要的结果
 * * 只有一个文件
 * * 需要直接删除 dist 文件夹
 * * 什么时候删除 ? 每次打包之前删除 dist 文件夹
 * * 打包完毕会自动创建一个
 */

/**
 * 利用gulp 启动一个服务器
 *  gulp 是基于node 环境的工具
 *  node 就是可以做服务器的语言
 *  gulp 可以启动一个基于 node 的服务器
 * 
 * 启动服务器，用哪个目录当作服务器根目录 
 *  dist 目录，是我的结果目录
 *  如果你使用 src 目录当作根目录，sass 文件怎么办
 *  启动服务器的时候，启动dist目录 里面的 对应的html 文件
 * 
 * sass 文件
 *  src/pages/login.html
 *  src/sass/login.scss
 *  怎么使用
 *    将来 src/pages/login.html 会把打包传递到 dist/pages/login.html
 *    将来 src/sass/login.css 会把打包传递到 dist/sass/login.css
 *  在html中写
 *    link href="../sass/login.css"
 * 
 * 自动刷新为什么不好使
 *  因为你启动的服务器是 dist 目录
 *  你修改的 src 目录下的内容
 *  你还需要一个任务，当src 目录下的内容修改的时候，自动重新打包一遍该文件
 *  导致 dist 目录下的文件修改，dist 目录下的文件修改就会自动刷新页面
 * 
 * 
 * 启动服务配置自定义域名
 *  webserver 位置的host属性一个你自定义好的域名(www.zlq.com)
 *  找到电脑中的 hosts 文件
 *    C:/windows/system32/drivers/etc/hosts
 *    注意：遭到哪个没有后缀的hosts 文件
 *    添加一行内容 127.0.0.1   www.zlq.com
 * 
 * */ 

/**
 * gulp-webserver 配置代理
 * 在 webserver({
 * proxies:[
    * {
    *   source: '代理标识符',
    *   target: '代理目标地址'
    * }
  * ]
 * })
 * 注意：
 *  1.如果没有多余代理，不要写空对象https://www.duitang.com/npi/blog/list/by_filter_id
 *  2.如果你想要使用代理，那么必须要是在 gulp-webserver 启动的服务器上运行页面
 */
menghen113
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
gulp入门使用.docx
09-11
# Gulp入门使用详解 Gulp是一个自动化构建工具，它允许开发者通过编写简单的JavaScript任务来自动化复杂的项目构建流程，如编译CSS、压缩JavaScript、合并文件以及自动刷新浏览器等。本文将引导你快速入门Gulp，...
gulp入门demo
12-07
**gulp入门知识详解** `gulp` 是一个基于流的JavaScript任务运行器，它极大地提高了前端开发的效率。在本文中，我们将深入探讨`gulp`的基本概念、安装过程、配置文件的编写以及如何实现描述中提到的功能。 ### 1. ...
构建工具gulp之入门指南
RJ0024的博客
12-14 155
构建工具gulp之入门指南 什么是gulp      gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。      gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript、coffee、sas...
推荐使用：gulp-exec - 精心打造的Gulp执行命令插件
gitblog_00096的博客
06-06 345
推荐使用：gulp-exec - 精心打造的Gulp执行命令插件 项目地址:https://gitcode.com/robrich/gulp-exec 1. 项目介绍 在开发过程中，我们经常需要在构建流程中执行一些系统级别的命令。gulp-exec 是一个专为 Gulp 设计的强大插件，它允许你在你的 Gulp 构建脚本中方便地运行和管理 Shell 命令。利用这个工具，你可以更加灵活地对文件操作...
Gulp入门使用
m0_71317638的博客
03-20 114
gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。gulp是一个自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的。ulpjs.com/
前端构建工具gulp入门教程
chuantingcheng0030的博客
08-15 95
本文假设你之前没有用过任何任务脚本（task runner）和命令行工具，一步步教你上手Gulp。不要怕，它其实很简单，我会分为五步向你介绍gulp并帮助你完成一些惊人的事情。那就直接开始吧。 第一步：安装Node 首先，最基本也最重要的是，我们需要搭建node环境。访问http://n...
自动化构建工具gulp入门（一）
拾荒者
06-11 256
一、什么是gulp？ gulp是一种比较受欢迎的前端自动化构建工具，它基于Nodejs流，可协助开发人员进行任务管理，减少IO操作。详细了解gulp可访问中文官方网址: https://www.gulpjs.com.cn/ 二、自动化与工程化 要想弄清为什么要使用gulp，我们还是要先为大家介绍一下自动化和工程化的概念： 前端自动化：借助于某些工具，监听用户操作，完成自动编译（sass...
gulp入门8：serites
计算机图形学
05-29 190
在Gulp中，是一个非常重要的函数，它允许你将多个任务（task）组合成一个顺序执行的序列。这对于那些需要按照特定顺序执行的任务特别有用。下面是对的深入研究，包括其用法、特点以及注意事项。
Gulp入门教程
木木三的专栏
05-10 1576
转载自：https://blog.csdn.net/xllily_11/article/details/51393569 Gulp 详细教程，各种注释 和步骤都有，请大家详细阅读并且实践，祝愿你们都走出 刀耕火种的时代，进入自动化 简介： gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完...
前端构建工具Gulp入门指南(第二篇)
崔振杰的专栏
09-28 263
我们上一篇安装node环境和gulp工具，并简单介绍了gulp构建工具的使用； 这篇我们重点介绍gulp任务使用方法。 编译LassAutoprefix及缩小化 第二步安装gulp 第三步新建项目并建立gulp环境依赖 第四步 新建配置gulpfilejs文件并运行gulp 编译Lass，Autoprefix及缩小化 检查node环境是否完成安装成功，执行命令如下： no
gulp入门5：registry
计算机图形学
05-29 253
在 Gulp 的上下文中，registry通常不直接指代一个常规用户需要使用的功能，因为它更多地与 Gulp 的内部任务注册和管理机制相关。然而，Gulp 允许通过其插件系统来扩展和自定义任务注册表的行为。以下是一个关于 Gulp 中registry的深入教程，结合了一些高级概念和可能的使用场景。
gulp的入门学习
Jason_yuxuan的博客
11-19 530
gulp能自动化的完成js/less/css/html/image等文件的合并，压缩，检查，监听文件变化，浏览器的自动刷新，测试等任务 gulp更高效的异步多任务
gulp入门.pdf
06-29
### Gulp 入门知识点详解 #### 一、Gulp 的定义及背景 - **官方定义**：Gulp 是一个基于文件流的构建系统。它强调了“streaming”，即数据流处理方式，这是 Gulp 相对于 Grunt 的一大特点。 #### 二、Gulp 与 ...
gulp入门教程代码
08-10
**gulp入门教程代码** 在IT行业中，JavaScript开发是不可或缺的一部分，尤其在前端领域，而`gulp`作为一款自动化构建工具，极大地提升了开发效率。本文将深入讲解`gulp`的基础知识和如何通过`gulp`进行项目构建，以...
GulpStart:gulp入门实战
05-12
**GulpStart: gulp入门实战** GulpStart 是一个针对初学者的教程，旨在帮助开发者快速上手使用Gulp——一个流行的JavaScript任务自动化工具。通过这个实战教程，你可以了解到如何利用Gulp来优化你的前端开发流程，...
心理咨询师证有用吗 含金量高吗
v1272514910的博客
03-26 766
随着社会的多元化发展，资源重新整合，社会分工与社会角色重新定义，各方面的机会越来越多，但是竞争的压力也是越来越激烈，每个人的社会压力也会与日俱增，从而产生心理问题的人就会慢慢的多了起来，在这个时候，心理咨询师作为社会情绪的稳定剂，渐渐的也成为了社会发展中不可缺少的一员。随着现在社会压力的增加人们的压力也是越来越大的，所以心理咨询师的证书还是非常有必要考的，特别是在我们国家的一线城市，心理咨询师的含金量是相当高的。2) 增加自己职业竞争的软实力，让自己在自己的职业生涯中获得更大的发展空间。
【React 】开发环境搭建详细指南
lph159的博客
07-24 1236
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 382
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
Gulp快速入门指南：提升前端开发效率的自动化神器
Gulp快速入门手册是一份详细的指南，介绍了如何利用Gulp这一强大的前端开发构建工具来提升项目管理和开发效率。Gulp是一款基于Node.js的自动化任务运行器，特别适合于现代Web开发中的代码构建流程，它的主要优点在于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值