Articles of gulp

BrowserSync不断地使用Express / Gulp进行GET

我正在运行Express服务器,并使用browserSync监视更改。 当我运行npm start ,它开始运行一个吞咽任务: // Server task gulp.task('server', function(cb) { // We use this `called` variable to make sure // the callback is only executed once var called = false; return nodemon({ script: 'server.js', watch: ['server.js', 'app/**/*.js', 'config/**/*.js'] }) .on('start', function onStart() { if (!called) { cb(); } called = true; }) .on('restart', function onRestart() […]

从gulp运行时,在WebStorm中debugging节点应用程序

我正在使用webstorm 10.0.2 ,并使用了bangular模板来生成一个项目。 我可以通过gulpfile.js窗口运行gulp命令,我可以在gulpfile.js设置一个断点,它会打到它,但我似乎无法得到它在我的server.js 它在我看来像吞食文件正在启动另一个node实例,因此,当你从webstorm“debugging”,你只是debugging吞咽。 我也尝试过使用yo hottowel另一个项目,但得到同样的事情 – 我无法通过webstormdebugging实际的应用程序。 任何人都可以告诉我如何configurationwebstorm,以便我可以debugging实际的服务器端节点代码,但仍然使用gulp构build工具?

NodeJS&Gulp Streams&乙烯文件对象 – 用于NPM包装的Gulp Wrapper产生不正确的输出

目标 我目前正在尝试为NPM Flat编写一个Gulp包装,它可以很容易的用在Gulp任务中。 我觉得这对Node社区是有用的,也完成了我的目标。 存储库是在这里给大家查看,贡献,玩和拉请求。 我正在尝试使多个JSON文件变平(使用点符号)副本。 然后我想将它们复制到相同的文件夹,只需修改文件扩展名从* .json到* .flat.json。 我的问题 我回来在我的JSON文件中的结果看起来像乙烯基文件或字节码。 例如,我期望输出像"views.login.usernamepassword.login.text": "Login" ,但我得到的东西像{"0":123,"1":13,"2":10,"3":9,"4":34,"5":100,"6":105等等 我的方法 我是开发Gulp任务和节点模块的全新开发人员,所以绝对不要让自己的眼睛看起来根本不对。 版本库将是最新的代码,但我也会尽力使问题保持​​最新。 吞噬任务文件 var gulp = require('gulp'), plugins = require('gulp-load-plugins')({camelize: true}); var gulpFlat = require('gulp-flat'); var gulpRename = require('gulp-rename'); var flatten = require('flat'); gulp.task('language:file:flatten', function () { return gulp.src(gulp.files.lang_file_src) .pipe(gulpFlat()) .pipe(gulpRename( function (path){ path.extname = '.flat.json' })) .pipe(gulp.dest("App/Languages")); }); 节点模块的index.js(也就是我希望变成一口气) […]

npm – 错误:EPERM:操作不允许,取消链接

Windows 10 1703 节点6.11.2 npm 5.4.0 每次我尝试安装一个npm包(例如:npm i gulp-notify),我收到以下错误: npm ERR! pathC:\ Users \ web-dev \ Desktop \ barber \ node_modules \ fsevents \ node_modules \ ansi-regex \ package.json npm ERR! 代码EPERM npm ERR! errno -4048 npm ERR! 系统调用取消链接 npm ERR! 错误:EPERM:操作不允许,取消链接'C:\ Users \ web- dev \ Desktop \ barber \ node_modules \ fsevents \ […]

从gulp运行时,在Webstorm中debugging节点js

我对此相当陌生,但我真的尽了最大努力寻找答案。 我用yeoman生成一个应用程序。 (使用'angular fullstack' – https://github.com/angular-fullstack/generator-angular-fullstack ) 它有一个运行nodemon的gulpfile.babel.jsconfiguration文件。 我正在尝试做的是让gulp服务nodemon实例打到我有的Webstorm断点。 我到目前为止所尝试的是: – 定期debugging。 (微不足道的)但是,当他遇到ECMA6语法时,似乎节点发送了excpections。 (Still ..我宁愿运行gulp实例,也不要从webstorm运行它。) – 使用–debug – 在webstorm中使用“远程debugging”。 – 在gulp任务中设置节点检查器并将其设置为侦听5353 – 使用–debug-brk并在端口5353上debugging(例如) 如果有人能帮助我,我真的很感激。 这个人在这里说Webstorm不能处理这种情况,但它很奇怪,你可以debugging远程服务器,但你不能debugginggulp nodemon服务器实例? 从gulp运行时,在WebStorm中debugging节点应用程序

链式顺序任务

我有3个任务要处理,当完成这3个任务时,我想要执行以下操作: 将这三个文件一起对待 丑化 写入磁盘 随着Grunt我有一个漫长的过程,所有这一切。 这是我用Gulp尝试过的 gulp.task('libs', function () { return gulp.src('js/libs/*.js') .pipe(concat('01.libs.js', {newLine: ';'})) .pipe(gulp.dest('min')); }); gulp.task('plugins', function () { return gulp.src('js/plugins/*.js') .pipe(concat('02.plugins.js', {newLine: ';'})) .pipe(gulp.dest('min')); }); gulp.task('apps', function () { return gulp.src('js/apps/**/*.js') .pipe(concat('03.apps.js', {newLine: ';'})) .pipe(gulp.dest('min')); }); gulp.task('scripts', ['libs', 'plugins', 'apps'], function () { return gulp .src('min/*.js') .pipe(concat('testFile.js', {newLine: ';\r\n'})) .pipe(rename({suffix: '.min.v' + […]

如何用绝对path来build立index.html引用资源?

用吞吐angular度搭build了一个Yeoman Web应用程序。 我的gulp build过程输出一个dist/index.html文件,使用相对path引用资产: <html> <head> … <link rel="stylesheet" href="styles/vendor-f57bbe49.css"> <link rel="stylesheet" href="styles/app-a0b8907b.css"> </head> <body> … <script src="scripts/vendor-a30f25be.js"></script> <script src="scripts/app-b7f411d9.js"></script> </body> </html> 我如何强制Gulp使用绝对path呢? 例如/scripts/而不是scripts/和/styles/而不是styles/ 以下是我目前src/index.html的摘录: <html> <head> … <!– build:css({.tmp/serve,src}) styles/vendor.css –> <link rel="stylesheet" href="app/vendor.css"> <!– bower:css –> <!– run `gulp inject` to automatically populate bower styles dependencies –> <!– endbower –> <!– endbuild –> […]

如何创build自定义命令来replace`gulp`或`npm run`?

我怎样才能编写我自己的terminal命令的NPM项目,这将取代gulp命令而不依赖npm run ? 我的项目包含以下Gulp和http-server自定义命令… ## COMMANDS I CURRENTLY HAVE | Command | Task | |———————–|—————————–| | npm run boom | "Builds then watches files" | | npm run boom — build | "Builds the assets files" | | npm run launch | "Starts a local server" | 这是因为其package.json文件中的scripts … /// package.json { "scripts": { "boom": […]

如何将多个(npm)package.json文件合并为一个Gulp?

让我们假设我有一个mainFolder和3个子文件夹(subFolderA,subfolderB,subfolderC)。 而这些子文件夹都包含一个package.json,具有依赖关系和devDependencies。 (mainFolder / subFolderA /的package.json) 我想在mainFolder(mainFolder / package.json)中将它们合并成一个package.json 是否有现成的gulp包(或者Gulp之外的任何其他解决scheme)来合并和合并package.json依赖和devDependencies? (让我们假设没有版本冲突,如果有解决scheme也包括这种情况,那太棒了!) 你可以发布一个例子gulpfile.js或解释其他方式/工具。 谢谢

Gulp突然编译得非常慢

最近,我无法理解,因为严格的stream水作业,我的编译时间变得非常慢。 他们现在平均每个编译18-20s,这是死亡缓慢。 我尝试从ruby-sass切换到node-sass,但是node-sass似乎不支持几乎任何我需要的(特别是映射)3.3 sass语法。 在他们全部在ms范围之前; 我从来没有记得他们甚至超过1秒。 这是我的sass任务文件: var gulp = require('gulp'); var sass = require('gulp-ruby-sass'); var autoprefixer = require('gulp-autoprefixer'); var minifycss = require('gulp-minify-css'); var notify = require('gulp-notify'); var rename = require('gulp-rename'); var handleErrors = require('../util/handleErrors'); var browserSync = require('browser-sync'); gulp.task('styl', function() { return gulp.src('styl/src/screen.scss') .pipe(sass({sourcemap: false, style: 'compact'})) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', […]