gulp

我正在尝试使用g和node.js流式传输我的过程，以缩小和串联CSS/JS文件进行生产。 这是我所做的。 我安装了node.js在我的Windows 7机器上。 使用此命令在全球安装Gulpnpm install -g gulp 然后我添加了一个新的用户变量称为NODE_PATH将其设置为%AppData%\npm\node_modules 关闭并重新打开了我的命令行后，我试图从命令行中运行一项GULP任务（即gulp css）。但这给我以下错误 'gulp' is not recognized as an internal or external command 我该如何工作？ 当我使用 Windows 中的搜索栏打开以下路径时，%AppData%\npm\node_modules我看到以下两个文件夹 gulp gulp-cli 我试图添加%AppData%\npm\node_modules到Path我的系统变量上的变量，但没有采用它，因为该变量达到的最大字符限制。 我从我的路上删除了几条路Path变量并添加;C:\Users\[MyWindowsUserName]\AppData\Roaming\npm\node_modules 但仍然不起作用。 我什至尝试使用此命令在运行时设置路径 PATH=%PATH%;C:\Users\[MyWindowsUserName]\AppData\Roaming\npm\node_modules然后运行gulp仍然有同样的问题。 我在这里想念什么？为了使它起作用，我还需要什么？ 答案 我通过卸载nodejs和Gulp解决了问题，然后再次重新安装两个。 要在全球安装Gulp，我执行了以下命令 npm install -g gulp 来自: stackoverflow.com

我从事的项目是用 gulp 构建的。 最近我将node版本更新到了v6.3.1。 名为"html"的任务抛出错误。 bogon:toClient work$ gulp html (node:2519) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version. [10:26:10] Using gulpfile ~/Project/TIME_Cancer_Treatment_Centers_of_America(CTCA)/toClient/gulpfile.js [10:26:10] Starting 'html'... (node:2519) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version. events.js:160 throw er; // Unhandled 'error' event ^ Error: CSS parse error scripts/vendor....

我看到人们在WebPack中使用Gulp。但是后来我阅读了WebPack可以替换Gulp吗？我在这里完全感到困惑…有人可以解释吗？ 更新 最后，我从Gulp开始。我是现代前端的新手，只是想快速起床。现在，一年多后，我的脚已经弄湿了，我准备搬到Webpack。我建议使用同一双鞋开始的人也是如此。并不是说您不能尝试WebPack，而只是说这似乎是从Gulp首先开始的复杂性…这没什么错。 如果您不想吞噬，是的，您也可以在软件包中指定命令。例如： "scripts": { "babel": "babel src -d build", "browserify": "browserify build/client/app.js -o dist/client/scripts/app.bundle.js", "build": "npm run clean && npm run babel && npm run prepare && npm run browserify", "clean": "rm -rf build && rm -rf dist", "copy:server": "cp build/server.js dist/server.js", "copy:index": "cp src/client/index.html dist/client/index.html", "copy": "npm run copy:server && npm run copy:index", "prepare": "mkdir -p dist/client/scripts/ && npm run copy", "start": "node dist/server" }, 答案 这个答案可能会有所帮助。任务跑步者（Gulp，Grunt等）和捆绑包（WebPack，浏览）。为什么一起使用？...

这是一个非常愚蠢的问题，但我还没有真正找到满意的答案：How do I use gulp globbing to select全部 文件在全部某个目录下面的子目录？ 我试过了： './src/less' './src/less/' './src/less/*' 它们似乎都不起作用。 答案 所有目录下的所有文件的模式通常是./src/less/**/*.*或者./src/less/**/*，两者都应该有效。 一般来说，最好匹配特定的文件扩展名（即使它们应该全部相同），以防止抓取系统文件或其他垃圾。./src/less/**/*.less只是为了.less文件，或者类似的东西.src/less/**/*.{less,css}对彼此而言.less和.css文件。 咕噜网站对大多数小匹配球都有很好的参考。 小型比赛，因为它是几乎所有与 Node 相关的内容的 glob 库。） gulp 或 minimatch 拥有自己的完整文档会很好，但这对您来说是开源的。 来自: stackoverflow.com

这是我的吞咽文件： // Modules & Plugins var gulp = require('gulp'); var concat = require('gulp-concat'); var myth = require('gulp-myth'); var uglify = require('gulp-uglify'); var jshint = require('gulp-jshint'); var imagemin = require('gulp-imagemin'); // Styles Task gulp.task('styles', function() { return gulp.src('app/css/*.css') .pipe(concat('all.css')) .pipe(myth()) .pipe(gulp.dest('dist')); }); // Scripts Task gulp.task('scripts', function() { return gulp.src('app/js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(concat('all.js')) .pipe(uglify()) .pipe(gulp.dest('dist')); }); // Images Task gulp.task('images', function() { return gulp.src('app/img/*') .pipe(imagemin()) .pipe(gulp.dest('dist/img')); }); // Watch Task gulp.task('watch', function() { gulp....

这是一个组合任务，我不知道如何用任务依赖项替换它。 ... gulp.task('watch', function () { var server = function(){ gulp.run('jasmine'); gulp.run('embed'); }; var client = function(){ gulp.run('scripts'); gulp.run('styles'); gulp.run('copy'); gulp.run('lint'); }; gulp.watch('app/*.js', server); gulp.watch('spec/nodejs/*.js', server); gulp.watch('app/backend/*.js', server); gulp.watch('src/admin/*.js', client); gulp.watch('src/admin/*.css', client); gulp.watch('src/geojson-index.json', function(){ gulp.run('copygeojson'); }); }); 相应的变更https://github.com/gulpjs/gulp/blob/master/CHANGELOG.md[弃用 gulp.run] 答案 gulp.task('watch', function () { var server = ['jasmine', 'embed']; var client = ['scripts', 'styles', 'copy', 'lint']; gulp.watch('app/*.js', server); gulp.watch('spec/nodejs/*.js', server); gulp.watch('app/backend/*.js', server); gulp.watch('src/admin/*.js', client); gulp.watch('src/admin/*.css', client); gulp.watch('src/geojson-index.json', ['copygeojson']); }); 您不再需要传递函数（尽管仍然可以）来运行任务。...

在 glob 匹配中编辑文件时，以下 Gulpjs 任务运行良好： // watch task. gulp.task('watch', ['build'], function () { gulp.watch(src + '/js/**/*.js', ['scripts']); gulp.watch(src + '/img//**/*.{jpg,jpeg,png,gif}', ['copy:images']); gulp.watch(src + '/less/*.less', ['styles']); gulp.watch(src + '/templates/**/*.{swig,json}', ['html']); }); // build task. gulp.task('build', ['clean'], function() { return gulp.start('copy', 'scripts', 'less', 'htmlmin'); }); 但是，它对于新文件或已删除的文件不起作用（不会触发）。 EDIT：即使使用 grunt-watch 插件，它似乎也不起作用： gulp.task('scripts', function() { return streamqueue( { objectMode: true }, gulp.src([ vendor + '/jquery/dist/jquery.min.js', vendor + '/bootstrap/dist/js/bootstrap.min.js' ]), gulp.src([ src + '/js/**/*.js' ]).pipe(plugins.uglify()) ) ....

我以前曾使用全球安装了Gulpnpm install gulp -g。然后，我克隆了一个现有的项目，这要求我使用自己的鸿沟。现在当我做一个gulp -v从我的项目文件夹之外，我会得到这样的不匹配。 C:\Users\userme> [11:14:05] CLI version 3.8.11 [11:14:05] Local version 1.0.0 当我从项目文件夹中做毛刺时，我会得到这个。 C:\project\new\tools> [11:14:26] CLI version 3.8.11 [11:14:26] Local version 3.8.11 现在，我无法使用Gulp正确合并JS文件（我在最小文件中遇到了一些奇怪的格式化错误），我怀疑这与此不匹配有关。 Is there a way to remove the global gulp version, but keep the project specific gulp？ Or can I update my global version gulp to @3.8.11？ 注意 - 我确实尝试通过使用npm update [email protected] -g但是什么都没发生。我仍然感到不匹配。 **Update to describe the issue:**我正在使用Gulp将多个JS文件合并到1个单个main.js文件中。我在合并文件中获得的格式在其中具有句法错误。 合并文件中的预期输出 - ... define('utils/knockoutBindings/slider',['require','ko','jquery'],function(require) { 'use strict'; var ko = require('ko'); var $ = require('jquery'); ....

所以，我一直在寻找这个，在这里找到"类似"的答案，但不完全是我想要的。 现在，如果我想用 karma 测试单个文件，我需要这样做fit(),fdescribe()在有问题的文件上… 然而，我真正想要的是能够使用配置文件调用 karma，并将其定向到特定文件，所以我根本不需要修改该文件，即： karma run --conf karma.conf.js --file /path/to/specific/test_file.js 是否有可能做到这一点？ 答案 首先你需要启动 karma 服务器 karma start 然后，您可以使用 grep 过滤特定的测试或描述块： karma run -- --grep=testDescriptionFilter 来自: stackoverflow.com

当我运行此命令时，它会做什么： npm install --save-dev package1 package2 它绝对不是安装多个软件包，但看起来至关重要。（例如https://www.browsersync.io/docs/gulp） 对我而言，它抛出了错误： C:\1HLAVNI\Lukas\Webdesign\lukasradek>npm install --save-dev gulp-babel gulp-add-src > [email protected] install C:\1HLAVNI\Lukas\Webdesign\lukasradek\node_modules\bufferutil > node-gyp rebuild C:\1HLAVNI\Lukas\Webdesign\lukasradek\node_modules\bufferutil>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (node "" rebuild ) gyp ERR! configure error gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable. gyp ERR! stack at failNoPython (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:401:14) gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:356:11 gyp ERR! stack at FSReqWrap....

我正在尝试总结我对最受欢迎JavaScript软件包经理，捆绑机和任务跑步者的了解。如果我错了，请纠正我： npm和bower是软件包经理。他们只是下载依赖项，不知道如何自行构建项目。他们知道的是打电话webpack/gulp/grunt获取所有依赖关系后。 bower就好像npm，但建造了扁平的依赖树（与npm它会递归）。意义npm获取每个依赖关系的依赖项（可以相同几次），而bower期望您手动包含亚依赖性。有时bower和npm一起用于前端和后端（因为每个兆字节可能在前端重要）。 grunt和gulp是任务跑步者，可以自动化所有可以自动化的所有内容（即编译CSS/SASS，优化图像，制作捆绑包并缩小/transplile IT）。 gruntVS.gulp（就好像mavenVS.gradle或配置与代码）。Grunt基于配置单独的独立任务，每个任务都打开/句柄/关闭文件。Gulp需要较少的代码，并且基于节点流，这使其可以构建管道链（W/O重新打开相同的文件）并使其更快。 webpack（（webpack-dev-server） - 对我来说，这是一个任务跑步者，并进行了热门重新加载更改，这使您可以忘记所有JS/CSS观察者。 npm/bower+插件可以替换任务跑步者。它们的能力经常相交，因此如果您需要使用会有不同的含义gulp/grunt超过npm+插件。但是，任务跑步者绝对可以使用复杂的任务（例如，在每个构建中，从ES6转到ES5，在所有浏览器模拟器上运行它，制作屏幕截图并通过FTP部署到Dropbox"）。 browserify允许浏览器的包装节点模块。browserifyvsnode’require实际上是AMD vs commonjs。 Questions: 什么是webpack和webpack-dev-server？ 官方文档说这是一个模块捆绑器，但对我来说，这只是一个任务跑步者。有什么不同？ 你会在哪里使用browserify？我们不能使用Node/ES6导入做同样的事情吗？ 你什么时候使用gulp/grunt超过npm+插件？ 当您需要使用组合时，请提供示例 答案 webpack和浏览 webpack和浏览几乎做同样的工作，那就是processing your code to be used in a target environment （主要是浏览器，尽管您可以针对其他环境，例如节点）。这种处理的结果是一个或多个bundles - 组装的脚本适用于目标环境。 例如，假设您编写的ES6代码分为模块，并希望能够在浏览器中运行它。如果这些模块是节点模块，则浏览器将不会理解它们，因为它们仅存在于节点环境中。ES6模块也无法在IE11这样的较旧浏览器中使用。此外，您可能已经使用了浏览器尚未实现的实验语言功能（ES下一个建议），因此运行此类脚本只会引发错误。WebPack和浏览等工具通过translating such code to a form a browser is able to execute。最重要的是，它们可以在这些捆绑包上进行大量优化。 但是，WebPack和浏览器在许多方面有所不同，WebPack默认提供了许多工具（例如，代码拆分），而浏览器只有在下载插件但是才能执行此操作using both leads to very similar results。这取决于个人喜好（WebPack是时尚的）。顺便说一句，WebPack不是任务跑步者，它只是您的文件的处理器（它通过所谓的加载程序和插件来处理它们），并且可以通过任务跑步者（除其他方式）运行它。 WebPack Dev服务器 WebPack Dev Server提供了与browsersync的类似解决方案 - 开发服务器，您可以在其中迅速部署应用程序，并立即验证开发进度，而Dev Server会自动在代码更改上自动刷新浏览器，甚至传播更改的代码。浏览器而无需重新加载所谓的热模块更换。 任务跑步者与NPM脚本 我一直在使用Gulp的简洁性和简单的任务写作，但后来发现我根本不需要吞噬也不需要咕unt。我所需要的一切都可以使用NPM脚本通过其API运行第三方工具。Choosing between Gulp, Grunt or NPM scripts depends on taste and experience of your team....

安装后Gulp.js通过NPM，我收到了no command 'gulp' found运行时错误gulp从安装到同一目录中的命令。 当看着node_modules/.bin/目录，我可以看到gulp在那里可执行。 我的NPM安装有问题吗？ 答案 这是完全正常的。如果你想gulp-cli在命令行上可用，您需要在全球安装它。 npm install --global gulp-cli 看安装说明。 还，node_modules/.bin/不在你里面$PATH。但是运行NPM脚本时，它会由NPM自动添加（请参阅此博客文章供参考）。 所以你可以添加scripts给你package.json文件： { "name": "your-app", "version": "0.0.1", "scripts": { "gulp": "gulp", "minify": "gulp minify" } } 然后您可以运行npm run gulp或者npm run minify启动Gulp任务。 来自: stackoverflow.com

我安装了（在全球范围内），看起来它起作用了，因为它运行了此代码： ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ([email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected]) └── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) 但是当我打字时gulp它说-bash: gulp: command not found 知道发生了什么事吗？ 答案 事实证明，NPM已安装在错误的目录中，因此我必须通过运行此代码来更改" NPM Config前缀"： npm config set prefix /usr/local 然后，我在全球（使用-g参数）上重新安装了Gulp，并且它正常工作。 本文是我找到解决方案的地方：http://webbb.be/blog/command-not-found-node-npm 来自: stackoverflow.com

我有一个Gulp RJS任务，该任务将我的所有自定义.js文件（任何非供应商库）串联和uglif。 我要做的是从此任务（控制器和指令）中排除某些文件/目录。 Heres my tree: - application - resources - js main.js - vendor - jquery - modernzr - angular - controllers - controller1 - controller2 - controller3 - directives - directives1 - directives2 - directives3 - widgets - widget1 - widget2 - widget3 - widget4 - modules - modules1 - modules2 - modules3 - modules4 Here my gulp.js dir = { app: 'application', dest: 'dest', }; config = { src: { js: dir....

我想从Gulp运行外壳命令gulp-shell。我看到以下成语被使用了。 这是从Gulp任务中运行命令的惯用方法吗？ var cmd = 'ls'; gulp.src('', {read: false}) .pipe(shell(cmd, {quiet: true})) .on('error', function (err) { gutil.log(err); }); 答案 gulp-shell已被黑名单。您应该使用Gulp-exec相反，它也有更好的文档。 对于您的情况，它实际上说明： 注意：如果您只想运行命令，只需运行命令，请不要使用此插件： var exec = require('child_process').exec; gulp.task('task', function (cb) { exec('ping localhost', function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); }); }) 来自: stackoverflow.com