本文介绍利用 gulp-rev 和 gulp-rev-collector 进行版本管理 npm官网介绍使用后的效果如下： "/css/style.css" => "/dist/css/style-1d87bebe.css...js" => "/dist/script1-61e0be79.js" "cdn/image.gif" => "//cdn8.example.dot/img/image-35c3af8134.gif" gulp-rev...: 对目标文件进行MD5计算序列值，更改文件名，生成键值对json文件（manifest文件，如上） gulp-rev-collector: 根据manifest文件的对应关系，替换目标文件内的引用链接...权限问题，建议删除node_modules文件夹，把gulp插件重新构建 npm install 如果不行，看下是否是windows下的gulp操作虚拟机中的文件，如果是，尝试在虚拟机中重新安装node...npm gulp然后运行试试。
gulp-rev 生成的manifest默认为： "index.css": "index.css?...v=04aff97a7b", 为避免同名文件覆盖版本号，对替换的路径增加一级目录，如下 "css/index.css": "css/index.css?...v=04aff97a7b", 修改gulp-rev下index.js， 123行增加manifest传入参数: opts = objectAssign({ path: 'rev-manifest.json...JSON, pwd_base: '' //增加一级目录 }, opts, pth); 146行增加： originalFile = opts.pwd_base + originalFile; gulp
gulp之自动化压缩合并加版本号 这个方案主要是为了实现js/css/image的压缩合并、自动添加版本号、自动加浏览器前缀和压缩html。...先把下面这里插件 npm i （插件名） -D 安装到项目环境内 gulp-sequence //顺序执行任务 gulp-csso //css压缩 gulp-jshint //js检查 gulp-uglify...'), //js压缩 gulp-imagemin //压缩图片 gulp-htmlmin //压缩html gulp-clean //清空文件夹 gulp-rev //更改版本名 md5后缀 gulp-autoprefixer...= require('gulp'), gulpSequence = require('gulp-sequence'), //同步执行任务 csso = require('gulp-csso...'); //gulp-rev 的插件，用于html模板更改引用路径 //清空文件夹 gulp.task('clean', function(){ return gulp.src('dist
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
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...服务中添加livereload:true（启动实时刷新的功能） 在要实现刷新的文件中添加.pipe(connect.reload()) 合并文件 npm install gulp-concat --
，主要针对macos系统用户新增了系统版本号高于10.12.6(macOS Sierra)客户端的代理判断，低于该系统版本号的就不输出了（也可以把其他版本号加到对象），具体样式如下图所示 我目前还是用的...，Find out which macOS your Mac is using 定位到 valine.js 中的 s=d(s) 后添加代码如下， const new_vertion = '12.01...） 注意将 macos_slug_match(s.osVersion) 添加到具体输出版本号html位置前需要做下判断是否为macos系统后再搜索class="vsys" 在其span内加上即可。...需要注意的是， 版本迭代顺序不能乱 函数是根据当前最新版本号和上一代版本最新版本号作为判断逻辑，所以更新时需要依次填写每一代的版本号 const new_vertion = '12.01',...OS X Mavericks 的最新版本号） }];
首先点击右上角的file 点击进入settings 选择 Editor—> File and Code Templates—>includes—>FileHea...
首先，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 =
gulp $ npm install gulp -g 进入到需要 gulp 管理的项目路径，如 /gulp 再安装一遍 $ npm install gulp --save-dev 安装 gulp 插件...$ npm install --save-dev gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify...gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del sass的编译 (`gulp-ruby-sass`) 自动添加...（`gulp-uglify`） 压缩图片（`gulp-imagemin`） 自动刷新页面（`gulp-livereload`） 图片缓存，只有图片替换了才压缩（`gulp-cache`） 更改提醒（`gulp-notify...highlightLineColor: "#cccccc", spotRadius: 6, chartRangeMin: 0 }); }) query.validate.js 用途：表单验证插件 用法：添加
Gulp是一个模块化打包工具。 Gulp本身只有几个入口，支持他拥有强大功能的是各种各样的插件。...Gulp的使用看起来非常简单，只需要一个一个任务链式执行就可以了，它还可以与Webpack结合起来使用 比如将Webpack作为一个插件来处理ES6转换为ES5的操作。...下面记录一下Gulp的API以及一些用到的插件。...请查看上述的 gulp.src 来了解更多信息。...---- gulp.watch(glob[, opts], tasks) 监视文件，并且可以在文件发生改动时候做一些事情。
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').../bunld/js/bundle.min.js 运行命令 gulp 返回如下 $ gulp [08:51:09] Using gulpfile ~\Desktop\nodejs\gulp\gulpfile.js...@babel/core @babel/preset-env -D const gulp = require('gulp'); const uglify = require('gulp-uglify')...-D const gulp = require('gulp'); const concat = require('gulp-concat'); const cssmin = require('gulp-cssmin
运行gulpfile文件时报错 报错内容： TypeError: gulp.on(...).on(...).on(...).on(...)\.start is not a function 问题分析：...一般这种情况是因为gulp版本引起的。...gulp本地版本和全局版本 解决方法： gulp4.0.0更新变动较大，可以考虑把本地版本和全局版本都切回3.9.1版本。...也有其他解决方法，详见参考文章2. npm install --save-dev gulp@3.9.1 npm install -g gulp@3.9.1 参考文章： gulp和gulp-cli的区别...Gulp error: gulp.hasTask is not a function Mismatch in gulp local and CLI versions 2. gulp-uglify压缩js
正文接下来这篇文章呢，就要来实现一下大多数的命令行工具都会有的两个功能，一个是帮助，一个是版本号。...实现版本号 --version接下来来实现版本号这个功能，其实实现版本号这个功能和实现帮助这个功能是一样的，只需要将版本号传递给 program.version() 方法就可以了。...然后呢，我们要调用 program.version() 方法，将版本号传递给这个方法就可以了。...，其实就一点，只需要将版本号传递给 program.version() 方法就可以了，commander 会自动帮我们处理 --version 这个参数，也就实现了 --version 的功能。...抽取版本号上面的版本号是写死的，那么我们可以抽取出来，放到一个单独的文件中，这样方便我们统一管理版本号。
npm install --save-dev gulp 7.创建一个Gulp的主文件gulpfile.js，并且在gulpfile.js中添加下面的代码 Gulp主文件用于注册任务 //载入gulp...的可以手动创建 # 创建src文件夹 mkdir src # 进入到src文件夹下 cd src # 创建index.html文件 touch index.html 2.向index.html中添加...的主文件gulpfile.js，并且在gulpfile.js中添加下面的代码 //载入gulp模块 var gulp = require('gulp'); //文件拷贝任务 gulp.task('copy...的情况下可以手动创建 # 创建less文件夹 mkdir less # 进入less文件夹中 cd less # 创建style.less文件 touch style.less 3.向style.less中添加一段简单的...的主文件gulpfile.js，并且在gulpfile.js中添加下面的代码 //载入gulp模块 var gulp = require('gulp'); var less = require('gulp-less
（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...": "^3.3.1“ } } （4）开发依赖 在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖 使用npm install 包名 --save-dev命令将包添加到...package.json文件的devDependencies字段中 { "devDependencies": { "gulp": "^3.9.1“ } } （5
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
在实习的公司做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
Gulp学习笔记 1. 安装 Gulp.js npm install -g gulp 2....gulp-uglify 和 gulp-concat，实现对 Javascript 文件压缩和合并，加上 –save-dev 参数会同时添加到包配置文件 package.json，以确保项目所需的依赖包可通过...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('.
": "^1.0.2", "gulp-concat": "^2.6.1", "gulp-concat-folders": "^1.3.1", "gulp-connect": "^...在复制到package.json文件中后，使用npm install命令，npm会下载devDependencies中对应版本号的依赖文件，这里只是完成了本地的安装，此时如果运行 gulp命令可能会报一些错误...， 大概率是因为没有安装对应全局的插件，或者本地安装的插件和全局安装的版本号不一致 如果没有安装对应全局和本地的插件，则使用命令安装(以版本号2.24.4的browser-sync为例) npm install...browser-sync@2.24.4 -g 本地安装 npm install browser-sync@2.24.4 --save-dev 如果安装了全局插件报错，可能因为本地和全局插件的版本号不一致...监听任务 依赖包引用 var gulp=require('gulp'); var cssnano=require('gulp-cssnano'); var rename=require('gulp-rename
gulp-autoprefixer:Prefix CSS gulp.task('autoprefixer', function () { return gulp.src( ['src/css/*...gulp-useref | gulp-rev 活久见是蛮有意思的，如此就可以更多体验那些存在；这两个插件也是在用了webpack之后，接触别的古董型项目才了解到的；这 gulp-useref 她可以把...gulp-order: 指定次序 The gulp plugin gulp-order allows you to reorder a stream of files using the same syntax...： gulp.task('mergeJs', function(){ gulp.src('....---- 猜你喜欢： Gulp探究折腾之路(I) Gulp折腾之路(II)
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
