Gulp 4 `series`不能同步完成任务_如何在GUP4中使用gulp.series？_从gulp 3.x迁移到gulp 4.x时，浏览器同步、脚本和样式重新加载不起作用 - 腾讯云开发者社区

由于长时间没同步该博客文章，Jenkins 打包的时候提示 ReferenceError: primordials is not defined 虽然可以发布成功并 push 到远程仓库，但是所有生成的文件内容为空...gulp.on(…).on(…).on(…).on(…).start is not a function gulp.series 用于串行（顺序）执行 gulp.parallel 用于并行执行上面的两个函数接受两个参数...done(); })); // Similarly Tasks 3 and 4 Code here gulp.task('main', gulp.series('task1', 'task2...', 'task3', 'task4', function (done) { done(); })); 进入官方文档查看，官方的意思是，4.0.0版本的，“default”右边两个参数放在gulp.series...()的参数中，否则会报错 // 我的部分 gulp 代码 // 执行task gulp.task('deploy',gulp.series('minify-css','minify-js',gulp.parallel

2261 0

前端工程化篇之 Gulp

我们使用gulp需要用到的包一个TASK任务，对应一个包，对应一个处理逻辑、 gulp.series对应的是同步任务，从左到右，依次执行任务。...去https://gulpjs.com/plugins/搜相关的插件 gulp-xxx 2. 打开插件的npm仓库看文档使用 3. 下载并引入gulp插件 4....('src/less/*.less', gulp.series('less')); gulp.watch('src/js/*.js', gulp.series('js-dev')); }); //...配置默认任务 --> 执行以上多个任务 gulp.task('js-dev', gulp.series('eslint', 'babel', 'browserify')); // 同步顺序执行，同一时间只能执行一个任务...速度慢 gulp.task('js-prod', gulp.series('js-dev', 'uglify')); // gulp.task('default', gulp.parallel('eslint

1.3K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

构建工具Gulp-lesson4

写作背景：在前面几节我们学到了gulp 对外暴露的常用的几个 API，gulp 本身的 api 并不是很多，这一节我们就统一的来过一遍，最这些 API 有个认识。...lastRun api：该 API 用来检索当前运行进程中完成任务最后一次的时间，在与 src api 组合时可以方便的跳过自上次任务执行后没有发生改变的文件，使得可以增量构建，加快构建速度。...series api：该 API 在前面我们有介绍到，在 gulp 用来将不同的任务按串行顺序组合执行，并支持串行嵌套&串并行相互嵌套。...task api：该 API 作用是为了注册一个任务到 gulp，但不建议这么做，我们往往可以通过导出该任务来达到注册任务的目的，task api 仅保留在无法使用导出的时候再使用，同时还有一个registry...结语：这一节简单说了说 gulp 对外暴露的几个 API 的作用，下一节找几个常用、使用的插件来演示一下，明天继续学习。

2314 0

构建工具Gulp-lesson3

写作背景：在前面两节提到的任务再 gulp 执行得到了相应的产物，但是当文件修改过后我们依然需要再次执行命令来进行构建，但是在开发过程中，gulp 同样支持我们通过 watch 来对文件进行监控，每当监控到文件变动就触发所关联的构建任务...，先执行 clean 任务后在进行 javascript 任务； const { watch, series } = require('gulp'); function clean(cb) { /...// body omitted cb(); } // 可以只关联一个任务 watch('src/*.css', css); // 或者关联一个任务组合 watch('src/*.js', series...(clean, javascript)); 注：上面的代码来自 gulp 官网；在文件监控关联的任务更需要注意禁止使用同步任务，同步任务无法确定任务的完成情况，无法在文件变动后再次触发。...function(cb) { // body omitted cb(); }); 注：上面的代码来自 gulp 官网；队列应用： gulp 默认在每次文件变化后都将触发关联任务的执行，短时间内的多次文件变化会将每个任务排队等待依次执行

2823 0

在 ASP.NET Core 项目中使用 npm 管理你的前端组件包

/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ==" } } } 　　那么 package-lock.json...当然，如果你修改了引用的包信息，当执行 npm install 命令时，package-lock.json 文件会同步更新。　　对于包的版本限定条件如下所示。　　...(".")); }); gulp.task("min", gulp.series(["min:js", "min:css"])); gulp.task("concatmin", gulp.series..., gulp.series(["min:css", "concatmin:css"])); gulp.watch(paths.js, gulp.series(["min:js", "concatmin...然而，我们手动去执行似乎有些不智能，我们能不能自动执行某些任务呢？答案当然是可以，同样是鼠标右键点击任务，点击绑定菜单选项，我们就将定义好的任务绑定事件上。 ?

1.8K3 0

第三方模块

使用步骤使用npm install nodemon -g下载它 -g代表全局安装在命令行工具中用nodemon命令替代node命令执行文件 4.第三方模块nrm nrm( npm registry...Gulp中提供的方法 gulp.src(): 获取任务要处理的文件 gulp.dest(): 输出文件 gulp.task(): 建立gulp任务 gulp.watch(): 监控文件的变化...Gulp插件 gulp-htmlmin: html文件压缩 gulp-csso: 压缩css gulp-babel : JavaScript语法转化 gulp-less: less语法转化...gulp-uglify :压缩混淆lavaScript gulp-file- include公共文件包含 browsersync 浏览器实时同步插件使用：去npm官网搜索，...'copy']);此代码执行会报以下错误，需添加gulp.series()将任务函数组合操作 gulp.task('default', gulp.series(['first', 'htmlmin'

6504 0

gulp 实现纯html、css、bootstrap 的打包

及其所需的依赖：npm install --save-dev gulp gulp-cssmin gulp-uglify browser-sync编写 Gulp 文件const gulp = require...('gulp');const cssmin = require('gulp-cssmin');const uglify = require('gulp-uglify');const browserSync...); gulp.watch('index.html', gulp.series("html")); gulp.watch('css/main.css', gulp.series("css"));...gulp.watch('js/main.js', gulp.series("js"));});// 默认任务gulp.task('default', gulp.series('html', 'css'...bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAx8ppTCeTTAs0pnLlR4t8Q

4112 0

放弃webpack,拥抱gulp

// gulpfile.js const { src, dest, series } = require('gulp'); const less = require('gulp-less'); const...参考browser-sync[2] const { src, dest, series, watch } = require('gulp'); const browserSync = require(...，不支持esm，你必须降低版本6.2.1,改用cjs才行使用gulp的一些常用的api,比如src、dest、series,以及browser-sync实现本地服务，更多api[3]参考官方文档。...本文示例code-example[4] 参考资料 [1]gulp-inject： https://www.npmjs.com/package/gulp-inject [2]browser-sync： https...://browsersync.io/docs/gulp [3]api： https://www.gulpjs.com.cn/docs/api/src/ [4]code-example： https://

8711 0

干货 | 小程序 gulp 简单构建

(tsPath, gulp.series("tsCompile")); // ts编译 var watcher = gulp.watch(copyPath, gulp.series("copyChange...")); // 复制任务 gulp.watch(watchLessPath, gulp.series("less")); // less处理 gulp.watch(imgPath, gulp.series...var destFilePath = path.resolve("dist", filePathFromSrc); del.sync(destFilePath); } });}); 4....最终任务最后，我们需要把这些任务一个个拼起来，最终对外输出两种：dev和build一般就够了： // dev && watchgulp.task( "default", gulp.series..."build", gulp.series( // 串行任务 // sync "clear", gulp.parallel( // 并行任务 // async "copy

1.4K3 0

第三方模块

使用步骤使用npm install nodemon -g下载它 -g代表全局安装在命令行工具中用nodemon命令替代node命令执行文件 4....Gulp中提供的方法 gulp.src(): 获取任务要处理的文件 gulp.dest(): 输出文件 gulp.task(): 建立gulp任务 gulp.watch(): 监控文件的变化...Gulp插件 gulp-htmlmin: html文件压缩 gulp-csso: 压缩css gulp-babel : JavaScript语法转化 gulp-less: less语法转化...gulp-uglify :压缩混淆lavaScript gulp-file- include公共文件包含 browsersync 浏览器实时同步插件使用：去npm官网搜索...'copy']);此代码执行会报以下错误，需添加gulp.series()将任务函数组合操作 gulp.task('default', gulp.series(['first', 'htmlmin'

1.1K2 0

9012教你如何使用gulp4开发项目脚手架

本文将会介绍如何使用gulp4来搭建项目脚手架，如果您还在使用gulp3或更老的版本，您也以通过本文的一些思想将之前的项目进行完善，更新。...src/views/*', gulp.series('html')); // 监听HTML变化 gulp.watch('src/js/**', gulp.series('js')); // 监听...js变化 gulp.watch('src/css/*', gulp.series('css')); // 监听css变化 gulp.watch('src/images/*', gulp.series...p 3000" }, "devDependencies": {} } ‍ 复制代码要想获取项目完整源码和demo，请移步gulp4_multi_pages。...在脚手架选型上，也不一定非要用gulp，webpack，一般的经验是传统型的静态网站适合用gulp，由于不需要编译es6，所以有更小的体积，当然也可以用webpack，本文主要是给大家提供一使用gulp4

1.4K1 0

对比webpack，你更应该先掌握gulp【10分钟教你彻底掌握gulp】

，就连某度都忍不住来瓜分一下流量，出了个fis（不过按照烂尾的惯例来看，基本会属于后继无人的状态，所以没有真正去用在生产项目中过），而且当时webpack虽然已经出现，但完全不能跟gulp抗衡，直到vue...gulp的核心api task, series, parallel, src, pipe, dest, on, watch task: 创建一个任务 series：顺序执行多个任务 prallel：并行执行多个任务...，如果是需要并行执行的话用parallel 代码中的through2主要是用来做文件流转换过滤，写gulp插件必备，下一节会大概的介绍一下 gulp.task('format', gulp.series...'); gulp.task('format', gulp.series('concat', () => { return gulp.src('....gulp.series('export', 'concat', 'money', (cb) => { //... })) 执行命令 $ gulp total 以上任务都可以独立执行，也可以合并执行

1.1K4 0

Django打造大型企业官网（一）一、nvm的安装二、gulp的安装和用法

node_mirror: https://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/ （4）.../dest/css/")) done(); }) 4.修改文件名安装插件 npm install gulp-rename --save-dev gulpfile.js var cssnano.../css/*.css', gulp.series('css')); }) 修改代码后，自动执行相应的任务 ?.../css/*.css', gulp.series('css')); }); gulp.task("bs",function () { bs.init({ 'server':.../css/*.css', gulp.series('css')); }); gulp.task("bs",function () { bs.init({ 'server':

9964 0

利用Gulp实现前端打包自动上传服务器

Contents 1 关于 2 使用gulp实现 3 修改package.json文件 4 使用 5 总结关于由于测试环境没有使用例如:CI/CD,Jenkins等服务。...gulp.task('deploy', gulp.series('execSSH', done => { console.log('2s后开始上传文件到服务器...')...done(); }, 2000) })) 注意在这里遇到一个坑，如果使用的是gulp4以上版本，打包命令可按照上面的方法写，如果是gulp4以下版本，按照下面的方法写 gulp.task('deploy...这是因为在gulp4与gulp3中依赖任务列表写法的改变，具体可看官方文档 series() 还有一个点需要注意：如果出现以下报错: ?...* 上传文件到服务器 */ gulp.task('deploy', gulp.series('execSSH', done => { console.log('2s后开始上传文件到服务器..

1.6K1 0

Gulp使用指南

, 切换到项目目录 => 输入指令 $ npm install gulp -D 4....不能创建同名文件夹 + 同级目录下, 创建一个叫做 views 的文件 => 不行 ?.../a/**') -> 找到指令目录下的所有文件 2-4. gulp.src('..../src/pages/*.html', htmlHandler) -> 当指定目录下的 html 文件发生变化, 就会执行 htmlHandler 这个任务 5. gulp.series()...=> 语法: gulp.series(任务1, 任务2, 任务3, ...) => 作用: 逐个执行多个任务, 前一个任务结束, 第二个任务开始 6. gulp.parallel() =>

8781 0

在前端中理解MVC服务之TypeScript篇

/**/*.ts', gulp.series('browserify')); gulp.watch('src/**/*.html', gulp.series('html')); gulp.watch...('src/**/*.css', gulp.series('css')); }); gulp.task('html', function() { return gulp .src('src...('dist')) .pipe(reload()); }); gulp.task( 'default', gulp.series(['browserify', 'html', 'css...complete bool值，可以知道此条数据是否有用使用TS构建Class.但，构造函数接受个纯对象，该对象将通过Window从用户数据输入中提供，此对象需要有一个Interface接口,以便任何纯对象都不能实例化...); this.name = name; this.age = age; this.complete = complete; } uuidv4(): string {

2K2 0

Gulp基本使用

1.基本使用 npm i gulp-cli -g npm i gulp -D cnpm i gulp gulp-uglify gulp-concat 2.创建文件gulpfile.js键入如下 const...gulp = require('gulp'); const uglify = require('gulp-uglify'); const concat = require('gulp-concat')...js')) done(); } function hello(done){ console.log('hello'); done(); } exports.default = gulp.series...js')) done(); } function hello(done){ console.log('hello'); done(); } exports.default = gulp.series...livereload.changed(path) }) } exports.default = watch; /** * 1.指定路径 * 2.打包指定输出的文件 * 3.压缩 * 4.

9401 0

Gulp 自动化构建案例

, page, image, font) module.exports = { compile } 复制代码文件清除做完这些，我们还需要做一些比较人性化的工作，我们每次打包的时候的文件删除，总不能每次都我们进行手动删除吧...= require('del') const clean = () => { return del(['dist', 'temp']) } 复制代码这里注意，del是一个异步任务，所以我们需要series...来进行调用示例： const build = series(clean, parallel( compile, extra )) 复制代码自动加载插件随着我们的插件引入越来越多...，我们的代码随着也需要引入许多的依赖，这样对我们的维护来说就会变的复杂，好在 gulp给我们提供了gulp-load-plugins的依赖包 yarn add gulp-load-plugins --dev...('gulp-babel') // 模板 const swig = require('gulp-swig') // 图片、svg压缩 const imagemin = require('gulp-imagemin

1.4K2 0

在发布组件库之前，你需要先掌握构建和发布函数库

这并不是说，不能把 TS 之类的源码发布到 npm 上并作为引用入口，实际上只要使用依赖的项目方把构建的流程打通，也不是不可行。...但是对于一些复杂的库来说，从源码到输出标准化的制品会经历很多道工序，你不能寄希望于调用方把这个事情做了，因此库的维护者非常有必要做好构建工作。做哪些构建工作？...还好，gulp 4.x 版本也提供了使用 ESM 编写任务的指导性文档，并且推荐我们采用gulpfile.babel.js来组织我们的配置文件，这背后依赖了@babel/register，而@babel...这里我们选用gulp-clean[4]。...import { series, src } from "gulp"; // ...省略其他代码 // 先 cleanUtils，再 buildBundle，通过 series 按顺序执行 export

7502 0

Hexo博客使用gulp压缩静态资源

Tips:前导必备博主博客地址博主使用的是yilia主题 ---- 1、全局安装gulp npm install gulp -g # 查看版本 gulp -v 2、安装gulp插件在站点根目录下安装...gulp-htmlmin --save npm install gulp-htmlclean --save npm install gulp-imagemin --save # 解决【Gulp打包问题...： var gulp = require('gulp'); var minifycss = require('gulp-minify-css'); var uglify = require('gulp-uglify...', 'minify-js', 'minify-images' //]); //4.0以后的写法 // 执行 gulp 命令时执行的任务 gulp.task('default', gulp.series...("----------gulp Finished----------"); // Do something after a, b, and c are finished. }); 4、静态资源压缩

1.2K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Hexo博客升级随笔

前端工程化篇之 Gulp

构建工具Gulp-lesson4

构建工具Gulp-lesson3

在 ASP.NET Core 项目中使用 npm 管理你的前端组件包

第三方模块

gulp 实现纯html、css、bootstrap 的打包

放弃webpack,拥抱gulp

干货 | 小程序 gulp 简单构建

第三方模块

9012教你如何使用gulp4开发项目脚手架

对比webpack，你更应该先掌握gulp【10分钟教你彻底掌握gulp】

Django打造大型企业官网（一）一、nvm的安装二、gulp的安装和用法

利用Gulp实现前端打包自动上传服务器

Gulp使用指南

在前端中理解MVC服务之TypeScript篇

Gulp基本使用

Gulp 自动化构建案例

在发布组件库之前，你需要先掌握构建和发布函数库

Hexo博客使用gulp压缩静态资源

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐