Node.js-Gulp的使用

最新推荐文章于 2023-03-20 22:40:21 发布
最新推荐文章于 2023-03-20 22:40:21 发布
阅读量323 收藏 1
点赞数
分类专栏： Node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44486539/article/details/103468434
版权
本文介绍了Gulp，一个基于Node.js的前端构建工具，用于自动化处理静态资源。详细讲解了Gulp的安装、核心方法如gulp.src()、gulp.dest()、gulp.task()和gulp.watch()，以及如何使用Gulp插件进行html、js、css等文件的压缩、转换和合并。还展示了如何设置文件监控和实现页面热更新，提升开发效率。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

概述

Gulp 是基于 Node 平台开发的前端构建工具，主要用来设置程序自动处理静态资源的工作。

通过 Gulp 能自动化地完成 html、css、javascript、less、sass、image 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，监听文件在改动后重复指定的这些步骤等。

简单来说：Gulp 就是用来打包项目的；它将重复的机械化操作编写成任务, 想要执行机械化操作时在命令行执行一个命令相关任务就能自动执行了，从而提高开发效率。

Gulp 的安装

全局安装：

npm install gulp -g

局部安装：

npm install gulp --save-dev

Gulp 中的方法

gulp.src() 用于获取任务要处理的文件

语法：

gulp.src(globs[,options])

参数：

  • globs 文件的匹配模式（类似于正则表达式），参数为字符串或数组

    • 用来匹配包括文件名的文件路径；匹配单个文件时可以直接使用指定的文件路径进行匹配；

    • 如果有多个匹配模式时，该参数可以为一个包含匹配模式的数组

  • options 该参数是一个对象，是个可选参数，一般用不到

gulp.dest() 用于输出文件，将内存中的数据写入到本地的文件中

语法：

gulp.dest(path[,options])

参数：

  • path 目标文件的路径（存储数据的文件路径），参数为字符串或函数
    • 为字符串时，直接是文件的路径
    • 如果是函数，则函数的返回值应为目标文件的路径
  • options 该参数事一个对象，一般用不到，需要时查手册即可

gulp.task() 建立 Gulp 任务

语法：

gulp.task(name[, deps], fn)

参数：

  • name 任务的名称
  • deps 一个包含任务列表的数组，这些任务会在当前任务运行之前完成；当任务比较多时一个一个来执行效率会很低，通过该参数就能执行数组中的所有任务（前提是当前数组中的任务都已注册）
  • fn 回调函数，表示当前任务需要做的一些操作

用来注册 “执行多个任务” 的任务一般命名为 defalue 表示默认任务，使用 gulp 命令来执行这个任务时可以直接省略任务名，也就是说：gulp default 命令可直接简写为 gulp，它会默认去查找名称为 default 的任务进行执行。

gulp.watch() 监控文件的变化

语法：

gulp.watch(glob[, opts], tasks)

参数：

  • glob 一个 glob 字符串或者一个包含多个 glob 字符串的数组，通过该参数来指定具体监控哪些文件的变化
  • opts 该参数是一个可配置对象，一般用不到
  • tasks 需要在文件变化后执行的一个或者多个任务；该参数为一个数组

使用 Gulp

  1. 在项目的根目录下创建 gulpfile.js 文件

  2. 重构项目的文件夹结构：创建 src 目录存放源代码文件，创建 dist 目录存放构建后的文件
    在这里插入图片描述

  3. 在 gulpfile.js 文件中编写相关任务

    // 首先引入 gulp 模块
const gulp = require('gulp')

// 通过 task 方法创建任务；在回调函数中执行相关操作
gulp.task('save', cb => {
  // 获取需要处理的文件
  gulp
    .src('./src/css/base.css')
    // 将处理后的文件输出到 dist 目录中
    .pipe(gulp.dest('./dist/css')) // 这里只是复制了文件
  
  cb() // 如果任务（task）不返回任何内容，需要使用 callback 来指示任务已完成；否则会报错
})

  4. 在命令行工具中执行gulp任务

    执行 gulp 任务需要全局安装 gulp 的命令行接口 gulp-cli ；安装成功后就可以执行 gulp 任务了

    安装命令：

    npm install gulp-cli -g

    安装完成后在命令行中执行 gulp 任务：

    gulp save

    在这里插入图片描述

Gulp 插件的使用

想要使用相关插件，首先要进行安装，安装语法：

npm install 插件名称 --save-dev

gulp-htmlmin：html 文件压缩插件。

安装命令：

npm install gulp-htmlmin --save-dev

压缩示例：

// 首先引入 gulp 模块
const gulp = require('gulp')
// 引入压缩 html 的插件
const htmlmin = require('gulp-htmlmin')

// 创建任务
gulp.task('htmlmin', () => {
  return (
    gulp
      // 压缩 src 下所有的 html 文件的代码
      .src('./src/*.html')
      // 压缩规则
      .pipe(htmlmin({ collapseWhitespace: true }))
      /* 将压缩的文件存储到指定目录中 */
      .pipe(gulp.dest('dist'))
  )
})

在项目的根目录下通过 cmd 命令窗口执行 gulp htmlmin 任务即可压缩指定文件的代码。

gulp-babel ：JavaScript 语法转化，用于转化 ES6 语法。

使用转化 ES6 插件需要安装相关的依赖，完整的安装命令为：

npm install --save-dev gulp-babel @babel/core @babel/preset-env

gulp-uglify ：压缩 JavaScript 代码。

转化示例：

main.js

const a = 666
let b = 999
const fn = (x, y) => {
  console.log(x + y)
}

gulpfile.js

// 首先引入 gulp 模块
const gulp = require('gulp')
// 引入转换 ES6 语法的插件
const babel = require('gulp-babel')
// 注册任务
gulp.task('babel', () => {
  gulp
    .src('./src/js/main.js')
    // 转换 ES6 语法
    .pipe(
      babel({
        // 根据配置的目标环境自动采用需要的babel插件
        presets: ['@babel/env']
      })
    )
    .pipe(gulp.dest('dist/js'))
})

执行结果：

在这里插入图片描述
继续压缩：

gulpfile.js

// 引入转换 ES6 语法的插件
const babel = require('gulp-babel')

// 引入压缩 js 代码插件
const uglify = require('gulp-uglify')

gulp.task('jsmin', () => {
  gulp
    .src('./src/js/base.js')
    // 转换 ES6 语法
    .pipe(
      babel({
        presets: ['@babel/env']
      })
    )
    // 压缩 js 代码
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
})

执行结果：
在这里插入图片描述

gulp-concat：用于合并 js 文件；使用时需要传入一个文件名作为合并后的文件的名称。

gulp-rename：重命名文件；一般用于对压缩后的文件进行重命名。

使用时需要传入一个参数，该参数可以是一个对象，在对象中设置用于重命名的属性；也可以是一个函数

常用的属性：

  • suffix 加后缀名（并不是文件的后缀名，只是在原文件名上追加名称）
  • prefix 加前缀名

示例：

base.js

const a = 666
let b = 999
const fn = (x, y) => {
  console.log(x + y)
}

base2.js

var x = 123,
  y = 456

console.log(x * y)

gulpfile.js

// 首先引入 gulp 模块
const gulp = require('gulp')
// 引入转换 ES6 语法的插件
const babel = require('gulp-babel')
// 引入转换 ES6 语法的插件
const babel = require('gulp-babel')
// 引入压缩 js 代码插件
const uglify = require('gulp-uglify')
// 引入合并 js 代码的插件
const concat = require('gulp-concat')
// 引入重命名插件
const rename = require('gulp-rename')

// 创建任务
gulp.task('default', () => {
  return (
    gulp
      // 获取指定目录下的所有 js 文件
      .src('./src/js/*.js')
      // 转 es5
      .pipe(
        babel({
          presets: ['@babel/env']
        })
      )
      /* 合并 js 文件 */
      .pipe(concat('build.js')) /* 合并后的文件名为 build.js */
      /* 将合并后生成的文件输出到指定目录下 */
      .pipe(gulp.dest('./dist/js'))
      /* 压缩 js 代码 */
      .pipe(uglify())
      /* 重命名压缩后的文件（向后追加文件名） */
      .pipe(rename({ suffix: '.min' }))
      /* 输出文件 */
      .pipe(gulp.dest('dist/js'))
  )
})

执执行结果：

在这里插入图片描述

gulp-less: less 语法转化插件；通过该插件可以将 less 语法转成 css 语法。

gulp-csso：css 文件压缩插件；用于压缩 css 代码。也可以使用 gulp-clean-css 插件，该插件也是用来压缩 css 代码的。

示例：

a.less

.headers {
  width: 200px;
  .logo {
    height: 200px;
    background: yellow;
  }
}

gulpfile.js

// 首先引入 gulp 模块
const gulp = require('gulp')
// 引入 less 插件
const less = require('gulp-less')
// 引入重命名插件
const rename = require('gulp-rename')
// 引入压缩 css 代码的插件
const csso = require('gulp-csso')

// 注册任务
gulp.task('cssmin', () => {
  return (
    gulp
      .src('./src/css/a.less')
      // 处理 less 语法，将 less 编译为 css
      .pipe(less())
      // 存储转成 css 语法后的文件
      .pipe(gulp.dest('./dist/css'))
      // 压缩 css 代码
      .pipe(csso())
      // 向后添加文件名
      .pipe(rename({ suffix: '.min' }))
      // 存储压缩后的文件
      .pipe(gulp.dest('dist/css'))
  )
})

执行结果：
在这里插入图片描述

gulp-file-include：公共文件包含；用于抽离公共代码。

在需要公共代码的文件的位置中书写 @@include(path)（path 为文件路径，包含文件名）代码，在执行注册的 fileinclude 任务时会将当前位置的代码替换为指定路径的文件中的内容。

示例：

header.html

<!-- 头部区域 -->
<div class="header">
  头部区域
</div>

test.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <!-- 引入公共的头部文件；执行相关任务时当前位置会替换为指定文件中的内容 -->
    @@include('./common/header.html')
    <!-- 内容区域 -->
    <div class="content">
      内容区域
    </div>
    <!-- 底部区域 -->
    <div class="footer">
      底部区域
    </div>
  </body>
</html>

gulpfile.js：

// 首先引入 gulp 模块
const gulp = require('gulp')
// 引入抽取公共代码插件
const fileinclude = require('gulp-file-include')

gulp.task('fileinclude', () => {
  return (
    gulp
      .src('./test.html')
      // 调用 fileinclude
      .pipe(fileinclude())
      // 将处理后的代码保存在 dist 目录下
      .pipe(gulp.dest('dist'))
  )
})

执行相结果：
在这里插入图片描述

gulp-livereload：页面热更新，当指定文件的内容发生改变时就会更新文件。

示例：

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/a.min.css" />
  </head>
  <body>
    <div class="box">
      <div class="section"></div>
    </div>
  </body>
</html>

a.less

@bgc: green;
.box {
  width: 200px;
  height: 200px;
  background-color: red;
  .section {
    width: 150px;
    height: 150px;
    background: @bgc;
  }
}

gulpfile.js

// 首先引入 gulp 模块
const gulp = require('gulp')
// 引入压缩 html 的插件
const htmlmin = require('gulp-htmlmin')
// 引入 less 编译插件
const less = require('gulp-less')
// 引入压缩 css 代码的插件
const csso = require('gulp-csso')
// 引入重命名插件
const rename = require('gulp-rename')
// 引入热加载模块
const livereload = require('gulp-livereload')

/* 创建任务，压缩 html 代码 */
gulp.task('htmlmin', () => {
  return (
    gulp
      // 压缩 html 中的代码
      .src('./src/*.html')
      .pipe(htmlmin({ collapseWhitespace: true }))
      // 将压缩的文件存储到指定目录中
      .pipe(gulp.dest('dist'))
      /* 在当前任务的最后铺个管道，用于实时刷新 */
      .pipe(livereload())
  )
})

/* 注册任务，压缩 css代码 */
gulp.task('cssmin', () => {
  return (
    gulp
      .src('./src/css/a.less')
      // 处理 less 语法
      .pipe(less())
      // 存储转成 css 语法后的文件
      .pipe(gulp.dest('./dist/css'))
      // 压缩 css 代码
      .pipe(csso())
      // 向后添加文件名
      .pipe(rename({ suffix: '.min' }))
      // 存储压缩后的文件
      .pipe(gulp.dest('dist/css'))
      // 在当前任务的最后铺个管道，用于实时刷新
      .pipe(livereload())
  )
})

// 注册默认任务
gulp.task('default', ['htmlmin', 'cssmin'])

// 注册实时更新任务
gulp.task('watch', ['default'], function() {
  // 开启监听
  livereload.listen()
  // 监听文件的变化，当文件变化时执行相应的任务
  gulp.watch(['./src/*.html'], ['htmlmin'])
  gulp.watch(['./src/css/*.less'], ['cssmin'])
})

执行更新任务：
在这里插入图片描述
gulp-connect：页面自动刷新；该插件内部有一个小型服务器，通过相关的服务器配置来完成刷新；当指定的文件内容发生改变时会自动刷新页面。

open：自动打开指定的 URL，是一个独立的插件不需要 gulp- 前缀。

示例，将上一个 gulpfile.js 文件的代码替换为如下代码：

// 首先引入 gulp 模块
const gulp = require('gulp')
// 引入压缩 html 的插件
const htmlmin = require('gulp-htmlmin')
// 引入 less 编译插件
const less = require('gulp-less')
// 引入压缩 css 代码的插件
const csso = require('gulp-csso')
// 引入重命名插件
const rename = require('gulp-rename')
// 引入热加载模块
const livereload = require('gulp-livereload')
// 实时更新页面模块
const connect = require('gulp-connect')
// 引入 open 插件
const open = require('open')

/* 创建任务，压缩 html 代码 */
gulp.task('htmlmin', () => {
  return (
    gulp
      // 压缩 html 中的代码
      .src('./src/*.html')
      .pipe(htmlmin({ collapseWhitespace: true }))
      // 将压缩的文件存储到指定目录中
      .pipe(gulp.dest('dist'))
      /* 在当前任务的最后铺个管道，用于实时刷新 */
      .pipe(livereload())
      .pipe(connect.reload())
  )
})

// 注册任务，压缩 css代码
gulp.task('cssmin', () => {
  return (
    gulp
      .src('./src/css/a.less')
      // 处理 less 语法
      .pipe(less())
      // 存储转成 css 语法后的文件
      .pipe(gulp.dest('./dist/css'))
      // 压缩 css 代码
      .pipe(csso())
      // 向后添加文件名
      .pipe(rename({ suffix: '.min' }))
      // 存储压缩后的文件
      .pipe(gulp.dest('dist/css'))
      // 在当前任务的最后铺个管道，用于实时刷新
      .pipe(livereload())
      .pipe(connect.reload())
  )
})

// 注册默认任务
gulp.task('default', ['htmlmin', 'cssmin'])

// 注册实时更新任务
gulp.task('watch', ['default'], function() {
  // 开启监听
  livereload.listen()
  // 监听文件的变化，当文件变化时执行相应的任务
  gulp.watch(['./src/*.html'], ['htmlmin'])
  gulp.watch(['./src/css/*.less'], ['cssmin'])
})

/* 注册页面刷新任务 */
gulp.task('server', ['default'], function() {
  // 配置服务器选项
  connect.server({
    // 指定根目录
    root: 'dist/',
    // 实时刷新
    livereload: true,
    // 配置端口号
    port: 5000
  })

  // 打开指定的 URL
  open('http://localhost:5000/')

  // 监听文件的变化，当文件变化时执行相应的任务
  gulp.watch(['./src/*.html'], ['htmlmin'])
  gulp.watch(['./src/css/*.less'], ['cssmin'])
})

当运行 gulp server 命令时就会自动打开浏览器显示页面，指定文件内容改变时页面会自动刷新。

gulp-load-plugins：用于模块化管理插件的插件；使用 gulp-load-plugins 模块，可以加载 package.json 文件中所有的 gulp 模块。

通过上面的例子可明显感受到除了要引入必要的 gulp 模块，其他模块也要一个一个的导入，这种写法非常的麻烦；通过 gulp-load-plugins 插件就可以解决这个问题。

gulp-load-plugins：插件的简单用法：

在项目中安装成功插件后，在 gulpfile.js 文件中导入该模块并调用，一般用 $ 变量来接收返回值；在使用 gulp- 前缀的模块时就不需要导入了，直接在对应的模块前拼上 $. 前缀即可，具体用法见“示例”。

示例：

// 首先引入 gulp 模块
const gulp = require('gulp')
// 引入模块管理插件，引入的是个函数所以要调用
const $ = require('gulp-load-plugins')()
// 引入 open 插件
const open = require('open')

/* 创建任务，压缩 html 代码 */
gulp.task('htmlmin', () => {
  return (
    gulp
      // 压缩 html 中的代码
      .src('./src/*.html')
      .pipe($.htmlmin({ collapseWhitespace: true }))
      // 将压缩的文件存储到指定目录中
      .pipe(gulp.dest('dist'))
      /* 在当前任务的最后铺个管道，用于实时刷新 */
      .pipe($.livereload())
      .pipe($.connect.reload())
  )
})

/* 注册任务，压缩 css代码 */
gulp.task('cssmin', () => {
  return (
    gulp
      .src('./src/css/a.less')
      // 处理 less 语法
      .pipe($.less())
      // 存储转成 css 语法后的文件
      .pipe(gulp.dest('./dist/css'))
      // 压缩 css 代码
      .pipe($.csso())
      // 向后添加文件名
      .pipe($.rename({ suffix: '.min' }))
      // 存储压缩后的文件
      .pipe(gulp.dest('dist/css'))
      // 在当前任务的最后铺个管道，用于实时刷新
      .pipe($.livereload())
      .pipe($.connect.reload())
  )
})

// 注册默认任务
gulp.task('default', ['htmlmin', 'cssmin'])

// 注册实时更新任务
gulp.task('watch', ['default'], function() {
  // 开启监听
  $.livereload.listen()
  // 监听文件的变化，当文件变化时执行相应的任务
  // gulp.watch(['./src/*.html', './src/css/*.less'], ['htmlmin', 'cssmin'])
  gulp.watch(['./src/*.html'], ['htmlmin'])
  gulp.watch(['./src/css/*.less'], ['cssmin'])
})

// 注册页面刷新任务
gulp.task('server', ['default'], function() {
  // 配置服务器选项
  $.connect.server({
    // 指定根目录
    root: 'dist/',
    // 实时刷新
    livereload: true,
    // 配置端口号
    port: 5000
  })

  // 打开指定的 URL
  open('http://localhost:5000/')

  // 监听文件的变化，当文件变化时执行相应的任务
  gulp.watch(['./src/*.html'], ['htmlmin'])
  gulp.watch(['./src/css/*.less'], ['cssmin'])
})

该示例的功能与上一个示例完全相同。

browsersync：浏览器实时同步。。。

nodejs-gulp的使用
sam80000的博客
09-24 600
1.安装nodejs 从官网下载，根据系统选择适合的安装包 安装完成后，在系统菜单里，找到 Node.js command prompt 输入node -v查看当前nodejs版本信息 拓展： npm NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，npm下载源是国外网站，会慢。可以用淘宝的cnpm，同样的东西 允许用户从NPM服务器下载别人编写的第三方包到本地使用 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用 允许用户将自己编写的包或命令行程序上
node-v13.14.0-x64.msi
02-09
Node.js是一种基于Chrome V8引擎的JavaScript运行环境，它允许开发者在服务器端使用JavaScript编写应用程序，打破了传统的前端后端界限，使得全栈开发变得更加便捷。本文将详细介绍如何在Windows 7系统上安装Node.js...
NODE----gulp 使用
Damys
10-15 263
gulp 构建项目 dist/ 经过打包压缩后的文件，一般用于正式环境使用 src/ 源代码，一般用于开发环境 源码构建 安装完成后，（module 项目根目录）执行命令：gulp 即可完成 src 到 dist 目录的构建 源码安装 项目可采用 gulp 构建，gulpfile.js 是任务脚本，package.json 是任务配置文件 step1：确保你的电脑已经安装好了 Node.j...
Node+Gulp
valentinelzt的博客
04-28 202
模块化 node.js规定一个JavaScript文件就是一个模块，模块内部定义的变量和函数默认i情况下在外部无法得到 模块内部可以使用exports对象进行成员导出，使用require方法导入其他模块 模块成员的导入 模块成员的导出 模块导出两种方式的联系与区别 系统模块 node运行环境提供的API，就是系统模块，因为这些API都是以模块化的方式进行开发的，所以我们又称Node运行环境提...
node.js中gulp简介与使用
weixin_45000814的博客
05-13 1191
1,node.js简介 本质是一种运行执行js程序代码的方式方法/环境 之前,我们只能在浏览器环境中运行js程序 现在我们可以在node环境汇总,运行js程序 node.js环境 是 基于 Chrome V8 引擎的环境,也就是以谷歌浏览器内核为环境,来运行js程序 引擎对js程序的作用就像汽油对汽车的作用，就是给动力，在这里指通过引擎运行js程序 js程序,在不同的环境下,有不同的功能 在浏览器环境下,受到浏览器的限制
nodejs+gulp
xyr05288的专栏
11-08 1166
1.Node js中使用HTML模板在nodejs中如使用express框架，她默认的是ejs和jade渲染模板。由于我在使用的时候觉得她的代码书写方式很不爽还是想用html的形式去书写，于是我找了使用了html模板。 直接上代码，主要的是在app.engine(‘.html’, ejs.__express);app.set(‘view engine’, ‘html’);这两句。var http
node.js-angular.js-boilerplate:Node.js和Angular.js的简单样板
05-09
要同时运行node.js和gulp watch实例，只需运行gulp默认任务。 gulp 。 同样， gulp build任务可用于构建项目，而无需运行任何监视任务或node.js服务器。 笔记 要在您的计算机上本地运行该应用程序，请调用node api/...
chotchkius-gulp:学习 Node.js 和 Gulp
06-08
例如，`gulp-sass`用于处理Sass文件，`gulp-babel`用于转译ES6+到ES5，`gulp-clean-css`用于压缩CSS，`gulp-uglify`用于压缩JavaScript。这些插件极大地简化了前端工作流程。 在`chotchkius-gulp-master`这个项目中...
node-v14.15.1-win-x64.7z
12-04
此外，Node.js还有丰富的生态系统，包括各种框架、工具和库，如Webpack（模块打包器）、Gulp（自动化工具）、Babel（JavaScript编译器）等，它们共同推动了Node.js在全栈开发中的广泛应用。 总结来说，"node-v14.15...
Node.js-基于koakoa-routerejssass的gulp构建的开发框架
08-10
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它让开发者能够在服务器端使用 JavaScript 进行编程。Koa 是由 Express 团队开发的一个轻量级、高性能的 Node.js web 应用框架，它设计的目的是为了简化 ...
nodejs实现简单的gulp打包
10-18
因为之前一直有人给我推荐gulp，说他这里好哪里好的。实际上对我来说够用就行。grunt熟悉以后实际上他的配置也不难，说到效率的话确实是个问题，尤其项目大了以后，目前位置遇到的项目都还可以忍受。不过不管怎么说，需要亲自用过gulp之后才能品评他和grunt之间的优劣。
node.js中的gulp工具
weixin_62902407的博客
03-20 413
node.js中的gulp工具
Node+Gulp+webpack
不想起床
11-25 341
Node 传统js开发的弊端：文件依赖，命名冲突 模块的导入导出方法 能够使用基本的系统模块 能够使用常用第三方包 能够说出模块加载规则 知道pack.json的作用 ：问一 导出模块中module.exprous 和exprous的区别 exports是modules的别名(简单使用，地址引用的关系)，导出对象最终以module.expores为准 ：问二： node中的系统模块：文件模块(读写...
【Nodejs】gulp
weixin_34250434的博客
10-19 137
https://blog.csdn.net/ganeshys2017/article/details/77341359 
node gulp
newbeeAmay的博客
09-01 205
fs是一个文档系统的api ，调用后可对文件进行操作。 node创建服务器 1.加载http核心模块 var http = require（‘http“） 2.创建一个服务器 http.createServer() 4.启动服务器
javascript nodejs中gulp的用法
Hr_ving的博客
09-23 220
javascript: nodejs中gulp的用法 在node中提供了一个好用的工具npm，可以用来下载各个包 在node中下载依赖包， 然后新建一个gulpFile.js文件，将代码写入这个文件中就可以运行了 /* gulp 下载依赖: npm i -g gulp npm i -D gulp */ const gulp = require("gulp"); /* css 下载依赖： npm
前后端交互（二）| Node+Gulp |（1）Node.js基础
Better_Xing的博客
10-19 843
Node.js基础 文章目录Node.js基础@[toc]1. Node开发概述1.1 为什么要学习服务器端开发基础1.2 服务器端开发要做的事情1.3 为什么选择Node1.4 Node是什么2. Node运行环境搭建2.1 Node.js运行环境安装2.2 Node环境安装失败解决办法2.2.1 错误代号2502、25032.2.2 执行命令报错2.3 PATH环境变量3. Node.js快速入门3.1 Node.js 的组成3.2 Node.js基础语法3.3 Node.js全局对象global 1.
Node+Gulp（待更新）
weixin_43288180的博客
02-14 200
NODE基础 Node
NodeJs Gulp模块
SillyBoy的博客
05-14 156
Gulp模块 1 gulp方法 gulp.src()：获取任务要处理的文件。 gulp.dest()：输出任务。 gulp.task()：建立gulp任务. gulp.eatch()：监控文件的变化。 //gulp.task()建立任务，第一个参数为任务名称；第二个参数为回调函数 gulp.task('first',() => { console.log('第一个gulp文件'); // 获取文件 gulp.src('./src/index.html') //将处
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值