我们可以使用下面这些特殊的字符来匹配我们想要的文件： * 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾 ** 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了...如果出现在末尾，也能匹配文件。 ? 匹配文件路径中的一个字符(不会匹配路径分隔符) [...] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!...时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法 !(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的 ?...即是排除模式，它会在匹配的结果中排除这个匹配，要注意一点的是不能在数组中的第一个元素中使用排除模式 gulp.src([*.js,'!...用gulp.dest()方法写入文件时，文件名使用的是文件流中的文件名，如果要想改变文件名，那可以在之前用gulp-rename插件来改变文件流中的文件名。
可以根据gulp.task(name[, deps], fn)特性写法替代之。deps：(Array)一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。...而根据当前的 gulp 配置，每次发生修改，都会全量检测一遍所有的文件的语法问题，实际上已存在的问题我并不想在本次提交中修复（同时也是其他同事写的，例如不加分号问题，改动量太大）。...以及@V2EX gulp如何管理多项目;热心码友也提出了一些可行的建议，比如：配置多个task，或者采用fbi，或者采用nodejs 中的 NODE_PATH@nodejs 中的 NODE_PATH等等...---- gulp-util幸之助 幸亏有gulp-util之协助：在折腾的过程中，难免不会出现奇奇怪怪的问题；然而gulp本身的报错提示机制真心让新手的我蛋蛋的忧伤：比如在折腾的过程中压缩JS代码就出现...，OK既然用了构建工具，那么自然也有对应的插件吧，果然 gulp-tpl2mod~模板文件转js插件;再借助require.js, 先使用gulp-tpl2mod把模板转换成js字符串，然后包装成一个模块
目前的文件结构 2.3 建立gulpfile.js文件 gulp需要一个文件作为它的主文件——gulpfile.js。我们会在这个主文件中定义我们的任务。...我们可以使用下面这些特殊的字符来匹配我们想要的文件： 符号 描述 * 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾 ** 匹配路径中的0个或多个目录及其子目录,需要单独出现...如果出现在末尾，也能匹配文件。 ? 匹配文件路径中的一个字符(不会匹配路径分隔符) [...] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!...时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法 !(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的 ?...即是排除模式，它会在匹配的结果中排除这个匹配，要注意一点的是不能在数组中的第一个元素中使用排除模式: gulp.src(['*.js', '!
而gulp呢，是基于stream流的形式，也就是前一个函数（工厂）制造出结果，提供后者使用。 同样的，也是包括基本用法和各插件的使用。...package.json包依赖文件和一个入口文件 gulpfile.js(其他名字识别不了） 然后就类似的先装上gulp npm install gulp --save-dev 最基本的使用方式是这样：...） js代码校验（gulp-jshint） 合并js文件（gulp-concat） 压缩js代码（gulp-uglify） 压缩图片（gulp-imagemin） 重命名（gulp-rename） 自动刷新页面...gulp styles 成功的话看到done信息，相应css文件也顺利产生。...Promise对象实现，回调函数的使用，参考 更多的操作还需到各自插件API查看 总之，gulp比grunt简洁了许多，但因为是基于流的形式，不免又会带来“一些麻烦”。
npm install -g 上述命令执行之后将会在当前的目录下创建一个 node_modules 的目录（如果不存在的话），然后将下载的包保存到这个目录下。...package.json文件可以手工编写，也可以使用npm init命令自动生成（注意：npm init 时，用户需回答一些问题，然后在当前目录生成一个基本的package.json文件。...yarn优点在于只要通过Yarn安装过的套件都会在本地目录产生Cache，也就是说只要安装过一次，下次重新安装都会从Cache重新读取， 安装速度会提升很多。 6、webpack是什么？...webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。 webpack 还有一个功能丰富的插件系统。...//文件合并 npm install gulp-rename --save-dev //重命名 //gulpfile.js //引入插件 var gulp = require('gulp'),
TnT，作为React深度使用者的我来说是忧伤的，于是我捣鼓出 wn-cli 来用类 React 快速开发微信小程序，然而在这个过程中，想了很多，为什么需要开发框架呢？...于是，我重新思考了下，最佳的微信小程序开发实践应该是无痛的，且舒服的，无痛的是指在小程序的飞速发展变更中，我们不用重复的浪费学习第三方框架和原生框架。...，执行时机同字面上意思（ complete 一定会在接口的最后执行）。...添加 runtime ，在使用 async/await 的地方引入 ./src/utils/lib/runtime.js 文件，幸运的是这件事情在这个repo中的 Gulp 任务中自动处理了。...重命名样式文件，以便小程序识别 // ... .pipe(rename((path) => { path.extname = '.wxss'; })) // ...
前言 如果你已经在项目中引入了gulp，那么不妨尝试用一些gulp集成好的插件来做一些任务。下面假定前端项目中根目录有src以及dist两个，分别用于开发和生产。...可以通过字符串，方法以及hash三种方式。个人建议使用最后一个最方便,fn的最强大。 使用 var rename = require('gulp-rename'); gulp.src("....：删除指定路径的文件，删除管道中的文件（需要vinylPaths模块的安装），如果是整 个文件夹内容清空/*.如果是包括文件夹删除，直接文件目录即可，如/**/* 使用 var del=require...dist/css/*min.css'], cb);}) //删除管道中的文件 gulp.task("del-less",function(){ return gulp.src('src/less/demo.less...因为页面文件中的都是相对目录，所以当css以及js使用为产出地址时，要求页面等必备的希望产品的也放到产出目录。
大家好，又见面了，我是你们的朋友全栈君。...的文件 7.输入 npm install gulp –save-dev //表示安装成功 随后在项目中产生 node_moudles 的文件 二 在开发目录下建立文件 “gulpfile.js”...插件，把若干个小js文件合并成一个大的js文件，可以减少http的请求（提高项目的性能）。...gulp-rename 插件 在cmd命令行输入 npm install gulp-rename –save-dev //安装gulp-rename 插件 待安装完成后 在gulpfile.js...的文件中输入const rename = require(“gulp-rename”); 后继续在gulpfile.js的文件中输入如下所示 （接着上面的合并） 随后再次启动监听 在cmd
Grunt和Gulp是Javascript世界里的用来做自动压缩、Typescript编译、代码质量lint工具、css预处理器的构建工具，它帮助开发者处理客户端开发中的一些烦操重复性的工作。...:一个用来移除文件和目录的任务 grunt-contrib-jshint:一个审查代码质量的任务 grunt-contrib-concat:一个连接多文件在一个文件中的任务 grunt-contrib-uglify...使用Gulp 除了一些著名的不同以外，Gulp的配置文件和grunt的非常相似，下文中的例子对比grunt的示例但是使用gulp包和约定。...示例的不同 取代gruntfile.js，添加一个命名为gulpfile.js的文件，在这个文件中，使用node.js的方法require()为下文中的几个变量赋值 var gulp = require...= require('gulp-watch'); 在赋值语句下方，调用gulp的task方法，第一个参数是任务的名字的字符串表示方式，第二个参数是一个回调方法 gulp.task('default'
为什么要用 gulp 与 grunt 相比，gulp 无需写一大堆繁杂的配置参数，API（中文 API） 也非常简单，学习起来很容易，而且 gulp 使用的是 nodejs 中 stream 来读取和操作数据...我们可以使用下面这些特殊的字符来匹配我们想要的文件： * 匹配文件路径中的 0 个或多个字符，但不会匹配路径分配符，除非路径分隔符出现在末尾 ** 匹配路径中的 0 个或多个目录及其子目录，需要单独出现...如果出现在末尾，也能匹配文件。 ? 匹配文件路径中的一个字符（不会匹配路径分隔符） […] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为 ^ 或 !...时，则表示不匹配方括号中出现的其他字符中的任意一个，类似 js 正则表达式中的用法。 !(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的 ?...即是排除模式，它会在匹配的结果中排除这个匹配，要注意一点的是不能在数组中的第一个元素中使用排除模式 gulp.src([*.js,'!
） gulp-rename（css文件重命名为wxss文件）。...gulp 这里简单贴一下gulpfile文件的配置，比较简单，其实就是借助 gulp-stylus 插件将 .styl 结尾的文件转化为 .css 文件，然后引入 gulp-rename 插件对文件重命名为....wxss 文件； 再创建一个任务对 .styl 监听修改，配置文件如下所示： var gulp = require('gulp'); var stylus = require('gulp-stylus...，我还是简单说明一下上面的代码：我首先定义一个主题文件 define.styl 用来存储色值变量，然后会再定义一个皮肤文件 vi.styl ，这里其实就是不同 主题类名 下需要改变色值的元素的属性定义，...变量中，然后通过setData的方法回显到对应的wxml文件中。
deps 类型： Array 一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。 fn 该函数定义任务所要执行的一些操作。...2.gulp.src(globs[, options]) 执行任务处理的文件 globs：处理的文件路径(字符串或者字符串数组) 3.gulp.dest(path[, options]) 处理完后文件生成路径...它使用一个名为 gulp-sass插件，这个插件基于libsass。我在这里选择使用libsass， 因为它比Ruby的替代方法更快，尽管它缺少一些功能。...此时您可以运行第一个任务。运行以下命令并观察，/ scss文件夹中的所有SCSS文件都将编译到相应目录中的CSS中： gulp scss 请注意，在本示例中，我们指定了要运行的任务。...最后，您可以使用gulp-rename将“.min”后缀添加到生成的文件中。
一、前言 在项目的前端开发中，对于绝大多数的小伙伴来说，当然，也包括我，不可避免的需要在项目中使用到一些第三方的组件包。...这时，团队中的小伙伴是选择直接去组件的官网上下载，还是图省事直接在网上搜索，然后从一些来源不明的地方下载，我们就无法管控了。...右击我们的项目，添加一个 package.json 配置文件。在这个 json 文件中定义了这个项目所需要的各种前端模块，以及项目的配置信息（比如名称、版本、许可证等等）。...就像这里，我在项目打开时绑定了自动监听文件变化的任务，这时，只要我修改了 css、js 文件，gulp 就会自动帮我们实现对于文件的压缩。 ...三、总结 这一章主要是介绍了如何在我们的 ASP.NET Core 项目中通过 npm 管理我们的前端组件包，同时，使用 gulp 去执行一些移动文件、压缩文件的任务。
，并且也删除（指定的路径或文件名太长）；额，这是一个超蛋疼的问题；也是在尝试几次后才成功(没闹明白失败和成功的原因)；至于删掉那坏的类库，最后也是采用将部分剪切出去或者手动rename致使路径变短些才得以干掉它...【用del rd命令都不足以删除之,我屮艸芔茻，醉了~】； del : 指定的路径或文件名太长，或者两者都太长。...帮助 (默认值为“Y”): A rd : 指定的路径或文件名太长，或者两者都太长。完全限定文件名必须少于 260 个字符，并且目录名必须少于 248 个字符。...('build')); 这个插件很有作用，它可以用来遍历gulp.src()指定的那些文件；利用这个特性，以及npm下自带的path插件，即可获取到每个文件的文件名；在特定场景需求里，它帮了我很大忙。...工厂可以在任意多的任务中重用。你也可以嵌套这些工厂，或者把它们连接起来，已达到更好的效果。分离出每个共享的管道，也可以让你能够集中地管理，当你的工作流程更改后，你只需要修改一个地方即可。
Gulp 插件列表：https://gulpjs.com/plugins/ 这一节我们将从下面这一段代码开始增加内容，来看一下 gulp 的一些产能常用插件和使用的方式。...")); } exports.default = build; gulp-rename： 可以便捷的在输出编译产物到文件中时对文件命名进行调整，已适应不同的场景。...src("src/*.js") .pipe(rename('main.js')) .pipe(dest("output")); } 增加特定的标识： 为 rename 的参数提供一个函数，在执行到这个函数时会传入一个...const sass = require('gulp-sass')(require('sass')); 下面的代码是 sass 教程的第一块内容，将变量插入到最后编译的结果中。...("error", sass.logError)) .pipe(dest("output/css")); } gulp-open： 支持我们在编译后打开一个文件或 URL，往往在开发过程中使用的
只需要在.html文件中插入一个prefixfree.js文件（可以是文档任何地方），建议把这个脚本文件放在样式表之后。 添加这个脚本之后，使用CSS3的属性时，只需书写标准样式即可。...自动化构建工具 自动化构建工具：webpack、gulp、grunt都可以实现css3属性前缀的自动化添加。在此我只演示一下gulp的应用。...# 安装gulp-autoprefixer插件（为css3属性添加前缀） $ npm i -S gulp-rename # gulp的重命名插件 第四步：在项目根目录下创建一个名为 gulpfile.js...gulp插件 rename = require("gulp-rename"); // 引用重命名的gulp插件 gulp.task('t1', function () { gulp.src(.../css/')); // 最终文件输出的位置 }); 可以根据你的情况修改路径，当前默认是你项目根目录下有个css目录，自动为css目录下面的所有文件自动创建一个*.min.css对应文件，就是最终使用的
可以js文件中需要什么插件再装什么插件） 10．Gulp实践流程：配置gulpfile.js文件命令，下载、调用gulp插件。...3．cnpm 为什么要安装cnpm？据说npm的服务器在国外，如果我们在国内从npm上下载文件会反应慢，而且可能会异常报错。。装上这个东东就快了。。。...**其实，镜像只要装到局部（本地目录）就好了，毕竟全局我们只装一个gulp， 但是在本地目录中却要装好多个用到的gulp插件，如果没有镜像，要等半天也是不开心的。 ...安装完了以后，在你安装的那个目录下边会发现一个node-modules文件夹，以后用到的gulp插件都会在这个里边了。...'); 7 var rename = require('gulp-rename'); 8 //如下示例，加一个转css的任务： 9 // 检查脚本，纠错 10 // 11 gulp.task('lint
引言 gulp是用于前端自动化构建的，方便前端进行即时开发的工具 自动化构建所需的插件 在项目路径下使用 npm init初始化之后，将下面需要安装的依赖复制到package.json文件中 "devDependencies...在复制到package.json文件中后，使用npm install命令，npm会下载devDependencies中对应版本号的依赖文件，这里只是完成了本地的安装，此时如果运行 gulp命令可能会报一些错误...监听任务 依赖包引用 var gulp=require('gulp'); var cssnano=require('gulp-cssnano'); var rename=require('gulp-rename...':"./" } }); }); //创建一个默认的任务 gulp.task('default',['bs','watch']); 使用gulp命令开启default默认任务之后，此时更改src...下任何一个文件内容，就会看到网页内容的更新
修己安人，内圣外王 最近，在开发Node项目过程中遇到了需要类jQuery深拷贝对象的问题，去Github找了半天，并没有符合的，于是，自己决定写一个（mixin.js），然后推送到NPM（查看Npm...来测试你的项目（该项目中，使用mocha进行测试管理），并且会在测试失败的时候通知到你，你也可以把项目当前的状态显示在README.md中，进而很容易知道项目当前状态。...('gulp-uglify'); var rename = require('gulp-rename'); gulp.task('default', function () { gulp.src...('src/*.js') .pipe(uglify()) .pipe(rename({ extname: '.min.js' })) .pipe(gulp.dest...package.json ├── README.md 项目面板 项目地址：https://www.npmjs.com/package/mixin.js package.json关键字段说明 package.json文件必须是一个
/build/')) }) 上面gulp配置完成的内容是： 1.将目录下所有的以.js结尾的文件 2.执行jshint代码检查 3.然后concat合并为一个文件， 4.再使用uglify...对文件进行压缩， 5.最后输出到当前目录下，build文件夹中。...minifyHtml = require('gulp-minify-html'); //项目中需要将.less文件重命名为.css var rename = require('gulp-rename...需要从bower_components文件夹中就项目实际使用的js和css文件复制发布文件夹中。...在gulpfile.js中有一个task名为vendor，主要任务就是将项目中实际使用的js和css复制到发布文件夹中。我们项目发布文件夹名字为dist。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
