报错信息： /usr/local/lib/node_modules/gulp/bin/gulp.js:129 gulpInst.start.apply(gulpInst, toRun);...^ TypeError: Cannot read property 'apply' of undefined at /usr/local/lib/node_modules/gulp/bin/gulp.js...(bootstrap_node.js:420:7) at startup (bootstrap_node.js:139:9) at bootstrap_node.js:535:3 执行命令全局安装...gulp-cli npm i gulp-cli -g
： 原链接：https://timonweb.com/posts/how-to-fix-referenceerror-primordials-is-not-defined-error/ 也许是因为你的gulp...解决方法： - 将gulp版本升级到v4。 - 将node版本降级到v11。 - 将graceful-fs升级到在node v12+下工作的版本4.2.2(推荐)。 推荐解决办法： 1.
管理员目录是不一样的：有的是C:\Users\Administrators，但是有的人是在一个Appdata的隐藏文件夹下的更深的目录里) 本地目录：除c盘以外，任何其他硬盘中一个你放置自己项目的文件夹路径...这时要看一下版本号就知道了:命令行输入—— node -v npm -v node -v查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。...4．安装全局gulp 全局安装（全局安装gulp目的是执行gulp任务） 安装命令：cnpm install gulp -g 安装完毕后，看一下版本号有没有(命令行输入：gulp -v)，就知道有没有安装成功了...定位命令： cd+ 空格 + 目录路径 其他一些周边常用命令： cd 定位到目录，用法：cd+ 空格 + 路径 ； cd.. 返回上一级目录 D: 定位到D盘，其他盘同理。... 六、常用命令目录 安装package.json(全局+本地） 定位本地目录 cd +目录路径 返回上一目录 cd..
只对发生更改的 js 文件进行语法检测 更现实的开发场景是， 项目代码已存在很久，代码中有大量的不符合 jshint 规范的代码。...而根据当前的 gulp 配置，每次发生修改，都会全量检测一遍所有的文件的语法问题，实际上已存在的问题我并不想在本次提交中修复（同时也是其他同事写的，例如不加分号问题，改动量太大）。...这样每次切换项目，都要更改下gulpfile.js,即便将这个分离出来写一个config.js,也得手动去更改，略略有点蛋疼。幸好，gulp有npm link,哇哦，体贴如你，夫复何求？...// –files 路径是相对于运行该命令的项目（目录） browser-sync start –server –files “css/*.css” 如果您需要监听多个类型的文件，您只需要用逗号隔开...例如我们再加入一个.html文件 // --files 路径是相对于运行该命令的项目（目录） browser-sync start --server --files "css/*.css, *.html
方法导入到指定的地方，将前一级的输出，作为后一级的输入，不再需要进行频繁的 IO 操作，但需要注意的是，这里的流内容，并非原始的文件流，而是一个虚拟的文件对象流 (Vinyl Files)，存储着原始文件的路径...，通过命令行查看 NodeJS 是否成功安装，Mac 系统的命令行在终端 (Terminal)，Windows 系统的命令行可通过 window + r 输入 cmd 运行命令行启动之后，可通过输入命令...npm update [-g] [--save-dev]，更新全部插件 npm update [--save-dev]，查看帮助 npm help，查看当前目录已安装插件 npm listnpm...跟 npm 的用法完全一样，只是在执行命令的时候，将 npm 换为 cnpm 即可gulp 安装执行命令 npm install gulp -g 全局安装 gulp，Mac 用户如果安装失败，可加上...;我们看到通过 .run 方法进行任务关联时，提示该方法已被弃用，建议使用任务依赖或 gulp.watch 任务进行触发，该 API 起到了文件监听的作用，当 gulp.src 匹配的路径下的文件发生了更改
gulp-asset-rev用于更改HTML文件引用静态资源的路径；gulp-rev用于修改静态资源的文件名。....pipe(rev()) // 修改静态资源的文件名 .pipe(assetRev()) // 更改HTML文件引用静态资源的路径 .pipe(gulp.dest('dist/js'))....pipe(assetRev()) // 更改HTML文件引用静态资源的路径 .pipe(gulp.dest('dist'));// 复制到目标文件路径 }); 完整的配置代码 //....html") // 源文件下的所有HTML .pipe(assetRev()) // 更改HTML文件引用静态资源的路径 .pipe(gulp.dest('dist'));// 复制到目标文件路径...另外，在其他项目也要使用Gulp的时候只要把gulpfile.js和package.json拷贝过去，再初始化Gulp就行了，而不用命令行来安装Gulp插件。
使用如下命令安装临时gulp与插件 npm install 这个命令可以说是下面这两行命令的缩写： npm install gulp --save-dev npm install gulp-sass -...2.gulp.src(globs[, options]) 执行任务处理的文件 globs：处理的文件路径(字符串或者字符串数组) 3.gulp.dest(path[, options]) 处理完后文件生成路径...Watchers 当检测到更改时，Watchers观察源文件以进行更改和调用任务。 gulpfile.js gulp项目的配置文件。...在本节中，我们将介绍所有的添加和更改。 return gulp.src(['scss/**/*.scss', '!scss/**/_*']) 在这个例子中，Gulp源提供了一个glob数组。...gulp.watch('scss/**/*.scss', ['scss']); 最后，我们调用Gulp的watch函数指向以“.scss”结尾的任何文件，并且每当发生更改事件时，运行“scss”任务。
图片 本篇博文的内容根据 Introduction to Gulp.js 系列文章 拓展而来，其代码、依赖包及目录结构部分均有所更改，更多详细内容，敬请参考原文及作者 Github 我们在上一篇博文.../gulp/tasks', { recurse: true }); 图片 根据上图我们可以看到，gulp 文件夹下有一个 config.js 文件，主要是各任务的路径匹配及文件配置，具体如下图所示 图片...default 默认任务 当我们运行 gulp 命令时，Gulp 将会执行 default 默认任务，而该任务具体代码如下所示： // default.js const gulp = require(..., ['optimize-images']); gulp.watch(config.sprites, ['sprites']); }) 图片 可以看到，watch 任务监听了四个文件路径下的文件更改...，我们将经过审查编译压缩过后的代码进行编码，而不会影响之前已执行的操作，若是任务执行的顺序相反，则会导致编码过后的文件无法执行后续的操作，同样的，在 build.js 中，我们也是先执行其他任务，最后才执行
引言 gulp是用于前端自动化构建的，方便前端进行即时开发的工具 自动化构建所需的插件 在项目路径下使用 npm init初始化之后，将下面需要安装的依赖复制到package.json文件中 "devDependencies...在复制到package.json文件中后，使用npm install命令，npm会下载devDependencies中对应版本号的依赖文件，这里只是完成了本地的安装，此时如果运行 gulp命令可能会报一些错误...， 大概率是因为没有安装对应全局的插件，或者本地安装的插件和全局安装的版本号不一致 如果没有安装对应全局和本地的插件，则使用命令安装(以版本号2.24.4的browser-sync为例) npm install...监听任务 依赖包引用 var gulp=require('gulp'); var cssnano=require('gulp-cssnano'); var rename=require('gulp-rename...':"./" } }); }); //创建一个默认的任务 gulp.task('default',['bs','watch']); 使用gulp命令开启default默认任务之后，此时更改src
，打开命令提示符执行下列命令（打开方式：window + r 输入cmd回车）： node -v查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。...稍后解释； cd定位到目录，用法：cd + 路径 ； dir列出文件列表； cls清空命令提示符窗口内容。...fn：回调函数 //gulp.src(globs[, options]) 执行任务处理的文件 globs：处理的文件路径(字符串或者字符串数组) //gulp.dest(path[, options...]) 处理完后文件生成路径 9、运行gulp 9.1、说明：命令提示符执行gulp 任务名称； 9.2、编译less：命令提示符执行gulp testLess； 9.3、当执行gulp default.../dist'); gulp.start('webpack'); }); ps:本地开发(命令：gulp)和线上(命令：gulp –product)部署gulp命令分开，本地会做文件更改的监听，并且不会压缩
打开命令提示符执行下列命令（打开方式：window + r 输入cmd回车）： node -v查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。...稍后解释； cd定位到目录，用法：cd + 路径 ； dir列出文件列表； cls清空命令提示符窗口内容。...fn：回调函数 //gulp.src(globs[, options]) 执行任务处理的文件 globs：处理的文件路径(字符串或者字符串数组) //gulp.dest(path[, options...]) 处理完后文件生成路径 9、运行gulp 9.1、说明：命令提示符执行gulp 任务名称； 9.2、编译less：命令提示符执行gulp testLess； 9.3、当执行gulp default或.../dist'); gulp.start('webpack'); }); ps:本地开发(命令：gulp)和线上(命令：gulp –product)部署gulp命令分开，本地会做文件更改的监听，并且不会压缩
; }); 我们可以在命令行中通过gulp hello来运行这个任务 $gulp hello 命令行将会返回一个日志，打印出Hello Zell! ?...Node的Globbing Globs是匹配文件模式，允许你在gulp.src中增加多个文件。它就像正则表达式一样，但是只用来表示文件路径。 当你使用glob，计算机检查文件名和路径以特定的特征。...大部分Gulp工作流倾向于只要求4个不同的匹配模式。 1.*.scss:*特征是一个通配符，用来匹配当前路径中的一些特征文件。...倘若这样，我们将匹配根路径下，所有以.scss为后缀名的文件 2.**/*.scss:这是一个更极端版本的*特征，匹配在根路径和一些子路径的以.scss结尾的文件 3.!not-me.scss:!...监视Sass文件更改 Gulp提供我们一个watch方法，监视是否有文件更改。
下载Windows Installer(.msi)程序进行安装，默认安装npm(node package manager)，及注册node的安装目录到操作系统的环境变量，这样在命令行界面任何路径下都可以访问...4) 常用插件 -- NodeJS扩展 SublimeText-Nodejs(已停止维护)：https://packagecontrol.io/packages/Nodejs Jake：https://...2.3 Gulp运行 1) 运行方式1：Gulp命令行方式执行 项目根目录，执行gulp命令，命令格式：gulp ，未指定任务名，执行所有任务。...（若Gulp列表出现警告，未列出任务，则需要点击警告设置Gulp的NodeJS和Gulp安装路径） 2> SublimeText SublimeText默认没有安装Gulp，参看SublimeText中插件支持的安装方法在...安装完成后 -> 快捷键ctrl+shift+p（或Tools -> Command Palette）运行命令行 -> 选中Gulp命令 -> 选中任务 -> 完成执行。 3.
'), //js压缩 gulp-imagemin //压缩图片 gulp-htmlmin //压缩html gulp-clean //清空文件夹 gulp-rev //更改版本名 md5后缀 gulp-autoprefixer...//加浏览器前缀 gulp-rev-collector //gulp-rev 的插件，用于html模板更改引用路径 目录结构 |- root | |-dist //此目录为下面生成的 | .../压缩html clean = require('gulp-clean'), //清空文件夹 rev = require('gulp-rev'), //更改版本名 md5后缀...'); //gulp-rev 的插件，用于html模板更改引用路径 //清空文件夹 gulp.task('clean', function(){ return gulp.src('dist...('dist/css')); }); //改变html引用路径 gulp.task('rev', function(){ return gulp.src(['dist/rev/**/*.json
解决方法是用管理员权限运行此文件，鼠标右击window图标，点击命令提示符（管理员）。之后把你的安装包所在路径输入进去就行了，这样打开安装包就不会报错了。 ? ?...执行node -v的命令查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。 ? 3.1.2 全局安装Gulp 说明：全局安装Gulp的目的是为了执行Gulp任务/操作。...安装：执行命令npm install --global gulp进行全局安装Gulp。 执行gulp -v的命令，出现版本号即为正确安装。 ?...说明：在这里我们要运行gulpfile.js定义好的gulp_less任务，执行的命令是gulp gulp_less。 ? ? 4 命令行的简单介绍 cd命令定位到具体的目录：cd + 路径。...比如：定位到F盘下的gulp文件夹。 ? dir命令用来列出当前目录下的文件列表。 比如：列出F盘gulp文件夹下的文件列表。 ? cls清空命令提示符窗口内容。
安装 layaair2-cmd layaair2-cmd安装的方式比较简单，由于我们前置准备已安装好了Node.js，所以直接在命令行终端模式下输入 npm i layaair2-cmd -g 回车即可...安装 gulp 要使用layaair2-cmd命令，没有gulp环境，是跑不起来的，下图的报错，正是不支持gulp导致。 ?...这时，我们就可以看到，.vscode目录下，一个执行外部命令的任务模板.vscode/task.json创建成功了，我们只需要更改一下label（任务名称）和command（要执行的命令）即可。...6.1 安装本地gulp环境 之前，我们以npm i gulp -g 命令安装过gulp全局环境。...如果要使用gulp监听等功能，还需要在项目的目录内安装本地gulp环境， 安装命令去掉全局参数-g即可，去掉后的命令为： npm i gulp，安装效果如下图所示。 ?
，这下打开了使用Gulp的任督二脉;你想让各个task按顺序执行，就有gulp-sequence供你搞起；你想使用熊猫压图，果不其然就有gulp-tinypng;你想让gulp命令能够接受传参，就有npm...，并且也删除（指定的路径或文件名太长）；额，这是一个超蛋疼的问题；也是在尝试几次后才成功(没闹明白失败和成功的原因)；至于删掉那坏的类库，最后也是采用将部分剪切出去或者手动rename致使路径变短些才得以干掉它...【用del rd命令都不足以删除之,我屮艸芔茻，醉了~】； del : 指定的路径或文件名太长，或者两者都太长。...帮助 (默认值为“Y”): A rd : 指定的路径或文件名太长，或者两者都太长。完全限定文件名必须少于 260 个字符，并且目录名必须少于 248 个字符。...分离出每个共享的管道，也可以让你能够集中地管理，当你的工作流程更改后，你只需要修改一个地方即可。
缩小 缩小在不更改功能的情况下从代码中删除不必要的字符。 因此，请求的资产（如 CSS、图像和 JavaScript 文件）的大小大幅减小。...捆绑时，已发送的总字节数指标明显减少。 加载时间显示了显著改进，但本示例在本地运行。 将捆绑和缩小与通过网络传输的资产结合使用时，可实现更高的性能提升。...可包含 bundleconfig.json 文件中的相对路径。 （必需） inputFiles：要捆绑在一起的文件数组。 这些是配置文件的相对路径。 可以选择使用空值，*这将导致输出文件为空。...可选，默认值 - false sourceMapRootPath：用于存储所生成的源映射文件的根路径。...package.json 相同的级别运行以下命令来安装依赖项： npm i 安装 Gulp CLI 作为全局依赖项： npm i -g gulp-cli 将以下 gulpfile.js 文件复制到项目根
实践 创建项目目录 首先初始化npm依赖项与基本信息，使用命令npm init一直回车，生成package.json文件，也可以直接去上边github仓库目录下载。...你的项目目录关系到你的gulp脚本里的任务路径，我脚本里写的是匹配所有的目录和文件。我简单举个例子：这里js/common里的js文件也会被处理。如果只想处理特定目录的文件，请修改任务里的路径。..."gulp-uglify": "^2.0.0", "uglify-js": "^3.3.9" } } 编写gulp脚本 新建 gulpfile.js文件,并引入所需模块，这里我把路径统一写在...具体关于路径的写法，可以去看gulp官网的api：https://www.gulpjs.com.cn/docs/api/ gulp-minify-css这个官网提示已经弃用，改用gulp-clean-css...'use strict'; var gulp = require('gulp'), minifycss = require('gulp-minify-css'),//压缩css 已弃用
Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。...打开一个终端窗口，运行以下命令： npm install -g browser-sync 3.当然您也可以结合gulpjs或gruntjs构建工具来使用，在您需要构建的项目里运行下面的命令: npm install...// --files 路径是相对于运行该命令的项目（目录） browser-sync start --server --files "css/*.css" 5.如果您需要监听多个类型的文件，您只需要用逗号隔开...例如我们再加入一个.html文件// --files 路径是相对于运行该命令的项目（目录） browser-sync start --server --files "css/*.css, *.html"...Image.png 2.安装gulp: npm i gulp --save ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
