Gulp 3 => Gulp 4问题_将Gulp 3函数转换为Gulp V4_Gulp v4 -任务排序问题 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Gulp 快速入门gulp API 文档

package.json { "devDependencies": { "gulp": "^3.9.1", "gulp-browserify": "^0.5.1", "gulp-jade...": "^1.1.0" } } gulpfile.js var gulp = require('gulp'), jade = require('gulp-jade'), browserify...= require('gulp-browserify') gulp.task('jade', function () { return gulp.src('src/template/**/*....jade') .pipe(jade()) .pipe(gulp.dest('builds/development')) }) gulp.task('js', function...() { return gulp.src('src/js/main.js') .pipe(browserify({debug: true})) .pipe(gulp.dest

7652 0

gulp

简单介绍 gulp是基于node开发的所以可以使用npm这个nodejs的包管理工具安装gulp，使用npm首先得配置node环境 Install npm install gulp-cli -...g 全局安装gulp gulp --help 返回帮助信息 package.json npm init 初始化npm npm install gulp gulp-util...--save-dev //从本地把整个gulp文件夹拉过来 task 创建gulpfile.js文件 var gulp=require('gulp'); gulp.task('hello',.../xiangmu/dist')); }); 复制img文件 var gulp=require('gulp'); gulp.task('hello', function () { return gulp.src.../xiangmu/dist')); }); 排除其它的文件 var gulp=require('gulp'); gulp.task('hello', function () { return gulp.src

9991 0

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

是的

没有找到

gulp pipe缓存_gulp使用教程

首先，gulp的源码里没有任何一部分是定义pipe的。 gulp的pipe方法是来自nodejs stream API的。 gulp本身是由一系列vinyl模块组织起来的。...pipe跟他字面意思一样只是一个管道例如我有一堆文件 var s = gulp.src(["fileA","fileB","fileC"]) src方法实际上是'vinyl-fs'模块的方法,选择一系列文件并创建可读流...方法只负责返回这个管道结构（Stream对象）楼主想要窥探管道里的内容，就要创建一个Stream对象，在Stream对象接收结果的方法里把流里的内容log出来即可 Stream与File 注意的是gulp...里的流的file必须是vinyl对象 var File = require("gulp-utils").File //或者 var File = require("vinyl") var myf =

7592 0

Gulp构建实例

fa fa-bar-chart"> 优惠券使用率代金券使用率 <div class="pie-chart<em>3</em> pie-chart pie-number easyPieChart" data-percent="34" style="width: 200px...12, lineCap: "square", barColor: "#81e970", animate: 800, scaleColor: false }); $(".pie-chart3"...rgba(241, 251, 255, 0.9)", lineWidth: 2, spotColor: "#a5e1ff", minSpotColor: "#bee3f6

1.8K4 0

Gulp基本用法

Gulp是一个模块化打包工具。 Gulp本身只有几个入口，支持他拥有强大功能的是各种各样的插件。...Gulp的使用看起来非常简单，只需要一个一个任务链式执行就可以了，它还可以与Webpack结合起来使用比如将Webpack作为一个插件来处理ES6转换为ES5的操作。...下面记录一下Gulp的API以及一些用到的插件。...请查看上述的 gulp.src 来了解更多信息。...---- gulp.watch(glob[, opts], tasks) 监视文件，并且可以在文件发生改动时候做一些事情。

7113 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')...-D const gulp = require('gulp'); const concat = require('gulp-concat'); const cssmin = require('gulp-cssmin...livereload.changed(path) }) } exports.default = watch; /** * 1.指定路径 * 2.打包指定输出的文件 * 3....压缩 * 4.输出目录 * cnpm i gulp gulp-uglify gulp-concat gulp-rename * sourcemap 保留了之前编译的代码使代码容易调试 * 出错

9401 0

gulp 错误集锦

运行gulpfile文件时报错报错内容： TypeError: gulp.on(...).on(...).on(...).on(...)\.start is not a function 问题分析：...文件时报错之 punc(() 报错内容： gulp SyntaxError: Unexpected token: punc (() 问题分析：这种大多是js代码中包含ES6语法的函数声明方式。...3. gulp-uglify压缩js文件时报错之 Unexpected token name 报错内容： _Unexpected token name «p», expected punc « 问题分析...：问题原因同上，也是ES6语法引起的。...4. gulp-htmlmin 报错内容： throw er; // Unhandled 'error' event ^ Error: Parse Error: <= 95% </spa<div 问题分析

1.4K1 0

使用Gulp

运行这几条命令，需要安装Git，没有安装Git的可以在电脑上自己手动创建一个code文件夹，并且进入code文件夹下 # 创建code文件夹 mkdir code # 进入code文件下 cd code 3....package.json文件 npm init 在命令行中运行npm init命令的时候会出现下图所示的要求用户输入name、version等值，当不清楚这些值的含义的时候，一直按回车键，会自动使用默认值 4....UTF-8"> Document 这是一个简单的web页面 3....dist目录中 .pipe(gulp.dest('dist/')); }); 4.在命令行中执行文件拷贝任务，将src目录下的index.html文件拷贝到dist目录下 gulp copy...Git Bash的情况下可以手动创建 # 创建less文件夹 mkdir less # 进入less文件夹中 cd less # 创建style.less文件 touch style.less 3.

5563 0

Gulp插件

（9）Gulp插件 gulp-htmlmin ：html文件压缩 gulp-csso ：压缩css gulp-babel ：JavaScript语法转化 gulp-less: less语法转化 gulp-uglify...：压缩混淆JavaScript gulp-file-include 公共文件包含 browsersync 浏览器实时同步 6、package.json （1）node_modules文件夹的问题文件夹以及文件过多过碎...（3）项目依赖在项目的开发阶段和线上运营阶段，都需要依赖的第三方包，称为项目依赖使用npm install 包名命令下载的文件会默认被添加到 package.json 文件的 dependencies...字段中 { "dependencies": { "jquery": "^3.3.1“ } } （4）开发依赖在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包...": "^3.9.1“ } } （5）package-lock.json文件的作用锁定包的版本，确保再次下载时不会因为包版本不同而产生问题加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址

4421 0

gulp插件

gulp是趋势 gulp完全开发指南 => 快来换掉你的Grunt吧 gulp的工作流程：文件流--文件流--文件流......因为grunt操作会创建临时文件，会有频繁的IO操作，而gulp使用的是流操作...因此gulp在效率上确实远胜grunt，并且学习成本不高，在这非常感谢刘剑辛的分享！...// 本地使用gulp npm install --save gulp-imagemin // 压缩图片 npm install --save gulp-minify-css //压缩css npm...install --save gulp-ruby-sass //sass npm install --save gulp-jshint //js代码检测 npm install --save gulp-uglify...q=gulp

1.1K5 0

构建工具Gulp-lesson4

写作背景：在前面几节我们学到了gulp 对外暴露的常用的几个 API，gulp 本身的 api 并不是很多，这一节我们就统一的来过一遍，最这些 API 有个认识。...series api：该 API 在前面我们有介绍到，在 gulp 用来将不同的任务按串行顺序组合执行，并支持串行嵌套&串并行相互嵌套。...task api：该 API 作用是为了注册一个任务到 gulp，但不建议这么做，我们往往可以通过导出该任务来达到注册任务的目的，task api 仅保留在无法使用导出的时候再使用，同时还有一个registry...结语：这一节简单说了说 gulp 对外暴露的几个 API 的作用，下一节找几个常用、使用的插件来演示一下，明天继续学习。

2314 0

gulp尝试开发

在实习的公司做web开发，gulp 是经常用到的，可是我做的不仅仅的前端，还包括后台，所以将前端文件移至后台这种事当然也需要我做啦，用gulp，但是，文件移至后台目录后，资源文件的路径必须修改，（我做的后台的是用...开发流程参考了几篇博客 Gulp插件制作指南 Gulp：插件编写入门先来看一下插件的全部代码 'use strict'; var gutil = require('gulp-util'); var...'); var through = require('through2'); gulp-util：错误日志打印模块，按照gulp的统一规范打印错误日志 through2： Node Stream的简单封装...var gulp = require('gulp'); var replace = require('gulp-url-replace') gulp.task('move', function(){...github上 gulp-url-replace

4890 0

Gulp学习笔记

Gulp学习笔记 1. 安装 Gulp.js npm install -g gulp 2....npm 安装 npm install --save-dev gulp-uglify gulp-concat 2.4 创建配置文件创建 gulpfile.js 文件 // 定义依赖项和插件 var gulp...=require('gulp'), gutil=require('gulp-util'), uglify=require('gulp-uglify'), concat=require...('gulp-concat'); // 定义名为 "js" 的任务 gulp.task('js', function(){ gulp.src('..../js/*.js', ['js']); }); // 定义默认任务 gulp.task('default', ['js']); 3. 运行 gulp

74012 0

gulp的使用

": { "browser-sync": "^2.24.4", "gulp": "^3.9.1", "gulp-autoprefixer": "^5.0.0", "gulp-cache...": "^1.0.2", "gulp-concat": "^2.6.1", "gulp-concat-folders": "^1.3.1", "gulp-connect": "^...5.5.0", "gulp-cssnano": "^2.1.3", "gulp-imagemin": "^4.1.0", "gulp-rename": "^2.0.0",...监听任务依赖包引用 var gulp=require('gulp'); var cssnano=require('gulp-cssnano'); var rename=require('gulp-rename...'); var uglify=require('gulp-uglify'); var concat=require('gulp-concat'); var cache=require('gulp-cache

1.3K2 0

Gulp折腾之路(III)

(Update@17/01/16) Gulp-sftp的喜忧路一路从Xftp，winScp，Sublime text3的sftp插件等迁移至gulp-sftp,一路都充满欢喜：毕竟在前端项目模块化、工程化之后...，即便Sublime text3的sftp插件都不能很好实现需求(需当手动将打包后的东西，借助Xftp等工具上传，当然也可以扩展Sublime text3的sftp插件的功能)。...jadeConfig.sftp.pass, remotePath: jadeConfig.sftp.remotePath + jadeConfig.objectDirName })); }); 但是用它也存在一个问题...参见gtg092x/gulp-sftp；（update@2016-06-28）有得一些空闲，又重新回看这个问题；有想过，设定 remotePath 为外层文件夹，显然这不是一个好的解决办法；也尝试一个新的插件譬如...阴差阳错的对remotePath配置的路径做了改变，这问题就消失了；更改 “/xxx/yyy/zzz/targetFolder/” 为 “/xxx/yyy/zzz/targetFolder”，即okay

1.2K5 0

精通gulp常用插件

博客地址：blog demo地址：gulp-plugins 匹配符 *、**、！、{} gulp.src('....var rename = require("gulp-rename"); gulp.src('..../dist')); gulp-concat 描述：合并文件。 var concat = require('gulp-concat'); gulp.src('..../dist')) gulp-csso 描述：压缩优化css。 var csso = require('gulp-csso'); gulp.src('..../dist')) gulp-sass 描述：编译sass。 var sass = require('gulp-sass'); gulp.src('.

1.1K9 0

gulp替换webpack

/node_modules/.bin/gulp", "gulp-production": "....": "^3.9.1", "gulp-clean-css": "^2.3.2", "gulp-concat": "^2.6.1", "gulp-connect": "^5.0.0...", "gulp-connect-reproxy": "^0.0.98", "gulp-css-image-rev": "^1.0.4", "gulp-htmlmin": "^3.0.0...", "gulp-if-else": "^1.0.3", "gulp-less": "3.3.0", "gulp-run-sequence": "^0.3.2", "gulp-sourcemaps...": "^1.9.1", "gulp-uglify": "^2.0.0", "gulp-util": "^3.0.7", "gulp-version-number": "^0.1.5

2.5K4 0

gulp使用教程

这个文件保存项目的相关信息第二: npm install gulp -g 安装全局gulp 然后在项目里的根目录再安装一遍 npm install gulp –save-dev 第三: 新建一个gulpfile.js...文件然后安装js代码检测插件，压缩文件插件，重名名插件(这里只讲一下这三个插件的使用，当然gulp还有很多强大的插件) js代码检测插件： npm install gulp-jslint –save-dev...压缩文件插件： npm install gulp-uglify –save-dev 重名名插件： npm install gulp-rename –save-dev 再安装一下npm install...jslint 然后在gulpfile.js文件里面编写gulp任务代码 var gulp = require("gulp"), jshint = require("gulp-jshint"),...uglify = require("gulp-uglify"), rename = require("gulp-rename"); gulp.task("scripts",function

5194 0

构建工具Gulp-lesson3

写作背景：在前面两节提到的任务再 gulp 执行得到了相应的产物，但是当文件修改过后我们依然需要再次执行命令来进行构建，但是在开发过程中，gulp 同样支持我们通过 watch 来对文件进行监控，每当监控到文件变动就触发所关联的构建任务...，先执行 clean 任务后在进行 javascript 任务； const { watch, series } = require('gulp'); function clean(cb) { /...const { watch } = require('gulp'); // 所有事件都将被监控 watch('src/*.js', { events: 'all' }, function(cb) {...const { watch } = require('gulp'); // 关联的任务（task）将在启动时执行 watch('src/*.js', { ignoreInitial: false },...function(cb) { // body omitted cb(); }); 注：上面的代码来自 gulp 官网；队列应用： gulp 默认在每次文件变化后都将触发关联任务的执行，短时间内的多次文件变化会将每个任务排队等待依次执行

2823 0

Gulp 快速入门

： task1 Hello World task2 流式处理 (1) 在项目根目录下创建 src 文件目录，里面创建 index.js (2) 在项目根目录下创建 dist 文件目录 (3)...安装 gulp-uglify $ npm install gulp-uglify --save-dev (4) 使用 gulp 压缩 index.js 并将结果输出 var gulp = require...--save-dev babel-core babel-preset-es2015 (2) 创建 .babelrc 文件，配置如下 { “presets”: [“es2015”] } (3)...手动使用 babel 转译： $ babel src -d lib (4) 安装 gulp-babel $ npm install --save-dev gulp-babel (5) 编写 gulpfile...')) }); (3) 启动 watch task $ gulp watch 修改 index.js 后 lib/index.js 也会随之改变。

7821 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭