Articles of gulp

如何使用Browserify和Gulp启动多页面应用程序

好吧,我接近终点线,我用Gulp和Browserify构build了新的PHP / JS应用程序。 最后一部分是如何“开机”,我的意思是如何做“第一个电话”。 假设我有3个JS入口点 /js/articles.js /js/categories.js /js/comments.js 他们每个人都使用一些JS模块。 然后我有3个HTML文件,需要他们的JS /articles.html /categories.html /comments.html 例如/js/articles.js var $ = require("jquery"); var common = require("../common.js"); var viewModel = { readData: function() { /* read record from API and render */ }, insert: function() { /* open a modal to insert new record */ } }; 我现在要做的就是执行这种“引导”:调用一些我需要的init函数,然后加载服务器数据,然后绑定所有的button和东西到viewModel的方法 $(document).ready(function() { […]

TypeError:from.pipe不是吞食泵的function

我正在使用下面的gulpfileconfiguration: gulp.task('watch', (cb) => { pump([ nodemon({ script: './server.js', ext: 'js', ignore: [ './dist', './public' ] }), gulp.watch('public/js/**/*.js', [ 'build-js' ]), gulp.watch('public/less/**/*.less', [ 'build-css' ]), gulp.watch([ 'public/views/**/*.html', 'public/index.html' ], [ 'build-html' ]) ], cb) }) 只要服务器文件发生更改,它就会重新启动服务器,或者在./public文件更改时运行相应的生成任务。 构build任务只是简单的缩小和concat任务,它们自己工作正常,所以这不是问题。 现在每当我运行它,我得到以下stacktrace: [15:52:51] 'watch' errored after 69 ms [15:52:51] TypeError: from.pipe is not a function at pipe (/home/linux/IdeaProjects/project/node_modules/pump/index.js:54:15) at […]

如何在NPM v5上安装Gulp v4?

我已经安装了新版本的npm,但现在当我尝试运行下一个命令时,依赖项不会被安装: npm i -S gulpjs/gulp#4.0 npm ERR! code ETARGET npm ERR! notarget No matching version found for undefined@4.0 npm ERR! notarget In most cases you or one of your dependencies are requesting npm ERR! notarget a package version that doesn't exist. NPM版本:v5.0.1 有没有从github分支安装npm包的新方法? 相关的问题(旧的NPM版本): 取决于在package.json中使用git URL的分支或标记? 有关安装依赖性的NPM文档: npm install docs

在Docker容器代码中使用Gulp命令139

我有这个docker-compose文件: rest-api: image: x/rest-api build: context: ./rest-api/dockerfiles/ dockerfile: local.Dockerfile environment: – BUILD_ENV=local ports: – "8001:8001" volumes: – ./rest-api:/var/www/rest-api user: $UID web: image: x/web-front build: context: ./web-front dockerfile: dockerfiles/local.Dockerfile environment: – BUILD_ENV=local depends_on: – rest-api links: – rest-api ports: – "3001:3001" – "35729:35729" volumes: – ./web-front:/var/www/web-front – ./web-front/logs/:/root/.npm/ user: $UID 和这2个local.dockerfile。 REST的API: FROM node:8-alpine RUN mkdir […]

针对节点应用程序的LibSass的SCSS编译器替代品

Libsass似乎是SCSS最受欢迎的编译器之一, http ://sass-lang.com/libsass列出了许多常用编程语言的各种libsass包装器。 对于一个节点应用程序, node-sass和相应的webpack或gulp加载器似乎是最明显的select。 然而,安装和使用node-sass需要github的访问权限和一个python 2.7的解释器,而我不想在这里讨论的原因,我没有在我的生产环境中。 在没有github访问权限和python解释器的情况下,在生产环境中安装和使用node-sass是否有一个可行的解决方法? 是否还有其他SCSS – 编译器可以通过webpack或gulp使用,不需要Github访问和/或安装的Python解释器?

使用VSCode在浏览器中debugging简单的Typescript应用程序

我正在构build我的第一个打字稿项目(我的背景是C#,Java)。这些应用程序按预期工作,但是我不能在打字稿中放置一个断点并debugging应用程序。 此外,当我使用纯打字机编译器(tscs与tsc.exe)映射完美的作品。 我正在使用gulp,因为我想将所有js放入一个文件中。 当生成的js中有一个错误,那么Visual Studio代码打击js文件(bundle.js)中的断点而不是打字稿,但是自定义断点不工作 我正在使用Windows 10进行开发。 请在下面find我的代码。 HTML 的index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World!</title> <!– <script data-main="main" src="scripts/require.js"></script> –> </head> <body> <p id="greeting">Loading …</p> <script src="bundle.js"></script> </body> </html> 键入脚本 main.ts import { Student } from "./student"; class Startup { public static main(): string { return Startup.showHello(); } public static showHello() […]

Gulp / Node.js错误:连接ECONNREFUSED

我目前正在使用WAMP运行本地服务器,并且正在尝试设置Gulp.js. 这里是我的gulpfile的内容: var gulp = require('gulp'), sass = require('gulp-ruby-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), minifyhtml = require('gulp-minify-html'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), imagemin = require('gulp-imagemin'), rename = require('gulp-rename'), clean = require('gulp-clean'), concat = require('gulp-concat'), notify = require('gulp-notify'), cache = require('gulp-cache'), livereload = require('gulp-livereload'), lr = require('tiny-lr'), server = lr(); gulp.task('styles', function() { gulp.src('src/styles/main.scss') […]

启动Node.js服务器W / GULP“连接”rest实时刷新(Angular应用W / HTML5模式)

我试图解决一段时间以来困扰我的问题。 场景: 问题是当我用Gulp启动我的本地服务器W / Live Reload。 它启动我的Angular应用程序就好了,但是当我更改文件Live Reload(页刷新)打破我的应用程序,并给了我一个“无法获得”,因为我的server.js(节点服务器)文件有一个特殊的方式,它redirect用户到我的“index.html”文件。 原因是因为我在Angular应用程序中启用了“HTML5模式”(对于漂亮的URL),我必须在server.js文件中指定它以正常工作。 在我的angular度应用程序里面的“html5 on”之前,一切正常,但是由于特殊的redirect,我的Gulp.js文件没有被正确写入以便知道这一点。 如果我运行“node server.js”,angular度应用程序按预期工作,并刷新页面,这只是在开发时遇到这个问题而烦人。 问题: 我怎样才能写我的gulpfile.js正确运行server.js文件? 有没有更好的方法来写我的server.js文件? 是否可以同时运行多个端口(开发模式和生产模式)? (我遗漏了几个文件夹和文件,使其更容易在眼睛) 文件结构: 根 build立(angular生产应用程序) 前(angular度发展应用程序) gulpfile.js (任务执行者) server.js (节点服务器) Server.js(节点服务器) var express = require('express'); var app = express(); app.use('/js', express.static(__dirname + '/front/js')); app.use('/build', express.static(__dirname + '/../build')); app.use('/css', express.static(__dirname + '/front/css')); app.use('/images', express.static(__dirname + '/front/images')); app.use('/pages', express.static(__dirname + '/front/pages')); […]

browserSync不能正常工作

我有这个代码重新加载浏览器的任何变化: var gulp = require('gulp'); var browserSync = require('browser-sync'); gulp.task('browser-sync', function() { browserSync({ server: { baseDir: "./" } }); }); 我在这里触发browserSync,通过html.js: var gulp = require('gulp'); var browserSync = require('browser-sync'); var fileinclude = require('gulp-file-include'); var rename = require('gulp-rename'); var util = require('gulp-util'); gulp.task('html', function() { var filename = 'middle.html'; return gulp.src(filename) .pipe(fileinclude()) .pipe(rename('index.html')) .pipe(gulp.dest('./')) .pipe(browserSync.reload({stream:true})); }); […]

gulp-webserver错误有时发生

events.js:85 扔呃; //未处理“错误”事件 ^ 错误:getaddrinfo ENOTFOUND localhost 在errnoException(dns.js:44:10) 在GetAddrInfoReqWrap.onlookup [as oncomplete](dns.js:94:26) 当我运行“ gulp ”命令时,遇到了这个错误,但是我不知道如何解决这个错误。 我在运行gulp serve命令时也遇到了这个错误,所以我猜这个错误是由gulp-webserver造成的。 我的gulpfile.js gulp serve任务在这里。 gulp.task('serve', function() { gulp.src('app/') .pipe(webserver({ livereload: true, directoryListening: true, open: true })); }); 请告诉我如何解决这个问题。