Articles of gulp webpack

Gulp构build全栈应用程序的输出/path/结构策略

我创build了我自己的Mongo + Angular + Node + Node的“种子”,部分原因是我想了解更多我所省略的细节,部分原因是我想要比yo生成器提供更多的控制和结构。 我有几个问题,但所有这些问题的根源是缺乏对全堆栈(MEAN)JS应用程序的部署/维护的理解。 为简洁起见,我将其称为FS JS应用程序。 通过理解一些基本问题的答案,我可以更加自信地并以我打算的精神devise自己的种子。 FS JS应用程序在开发过程中是否与生产中的方式相同,即通过调用node ? 答案是肯定的,我想,但我只是想确定一下。 专业人士如何部署FS JS应用程序? 有形的部署文件是什么样的? 安装仍然通过npm install ? 这是我第一次遇到麻烦的地方。 我已经看到许多种子将服务器代码构build到/dist/子目录。 这让我想,要么我们应该把我们需要的所有东西捆绑在一起并压缩它,要么我们应该用npm来安装,并且从dist而不是source目录运行服务器 – 例如zip / git整个/ package.json将其复制到目标,克隆/解压缩,然后npm install在那里。 尝试转换服务器文件结构以使源文件合并为一个文件是否合意/容易/常见? 我知道,对于客户端文件,把它们捆绑在一起以节省networking开销是有意义的。 所以至less我们可能会捆绑所有的客户端文件,并使用模块来模拟文件,整个文件结构可能只是app.js 即使是依赖关系也可以合并成一个文件,而且通常是一个Gulp任务。 但对于服务器,这是我应该尝试做的事吗? 如果是这样,任何提示? 缩小和/或uglify服务器文件是否是最佳做法? 同上 对于服务器源代码转换的操作顺序是什么,所以path不是问题呢? 对于client东西,我通常做这样的事情: 使用带有babel es6将es5转换为es5到临时文件夹中的单个.js文件 做东西到临时文件夹中的js文件,比如缩小或丑化它,当然是一次一个。 从tmppipe道到真正的文件夹,然后清理 这是我的想法 – bower_components – node_modules – source – client – common […]

gulp不能在Docker Ubuntu上运行

我正尝试使用gulp在docker环境中启动一个webpack编译器。 当我尝试运行命令(在ssh,Dockerfile或Procfile中)时,它将失败,并显示错误代码1,并且什么也不打印。 我检查和gulp安装在node_packages,但是当我从node_packages / .bin运行它,我得到相同的响应。 运行“npm”工作,但运行“节点”似乎也不工作。 有谁知道发生了什么问题? Dockerfile FROM quay.io/aptible/ubuntu:14.04 # Basic dependencies RUN apt-install build-essential python-dev python-setuptools RUN apt-install libxml2-dev libxslt1-dev python-dev # PostgreSQL dev headers and client (uncomment if you use PostgreSQL) # RUN apt-install libpq-dev postgresql-client-9.3 postgresql-contrib-9.3 # MySQL dev headers (uncomment if you use MySQL) RUN apt-install libmysqlclient-dev RUN easy_install pip […]

从gulp注入一个环境variables到webpack

我有一个从我开始webpack捆绑gulpfile。 webpackconfiguration具有使用process.env.NODE_ENV定义的别名,如下所示 . . resolve: { modulesDirectories: ["node_modules", "js", "jsx"], extensions: ["", ".js", ".jsx"], alias: { config: path.join(__dirname, ('config.' + process.env.NODE_ENV + '.js')) } }.. 在gulp文件中,我有两个按顺序执行的任务 set-env使用gulp-env设置环境variables,如下所示 gulpEnv({ vars: { NODE_ENV: 'dev' } }); webpack任务依赖于以前的任务,只有在第一个完成时才执行 这里的variables似乎没有得到正确的注入。 该文件名已被parsing为config.undefined.js 。 我在做什么有什么问题?

Webpacking jQuery和自定义文件:jQuery是未定义的

我使用webpack连接我自己的JS库和JS文件。 目前的设置是这样的 var wpStream = require('webpack-stream')'; var files = ['jquery.js', 'angular.js', 'app.js', 'controller.js', 'etc.js']; gulp.task('pack', function(){ return gulp.src(files) .pipe(wpStream({ output:{filename: 'bundle.js'} }).pipe(gulp.dest('dist')); }); 这很好。 我的文件被创build,并具有在我的files数组中指定的所有内容。 然而,在页面加载,我得到的错误jQuery is not defined 。 此外,在我的控制台,当我键入jQuery没有jQuery,而是jQuery111206520785381790835 。 当我追加一个点来查看方法列表时,只有正常的对象方法( hasOwnProperty , toString等)。 我如何访问jQuery? webpack用它做了什么?

把Gulp的消息传递给gulp-coffee,gulp-concat和webpack-stream

我有这个代码: var gulp = require('gulp'); var webpack = require('webpack-stream'); var coffee = require('gulp-coffee'); var concat = require('gulp-concat'); gulp.task('webpack', function() { gulp.src('*/lib/*.coffee', { base: '.' }) .pipe(coffee({ bare: true })) .pipe(concat('app.js')) .pipe(webpack()) .pipe(gulp.dest('.')); }); 但是,它到达webpack()时webpack() 。 我怎样才能使从concat()传递给webpack()成功运行? 我还假设,如果我删除了concat()pipe道,并直接从coffee()到webpack() ,那么我最终会得到由webpack()处理的多个文件,而不是一个单一的,对吧? 我尝试使用Webpack的coffee-loader ,但由于某些原因,它输出内容bare: false (当我看着输出文件),即使在实际的包,它似乎是硬编码输出bare: true 。 所以这就是为什么我使用gulp-coffee 。

gulp webpack-dev-server:bundle完成之前的callback

我正在尝试添加一个callback到Gulp中的webpack-dev-server模块。 callback函数的目标是通知用户启动dev服务器的URL。 问题是在捆绑过程完成之前调用callback。 如果我添加一个固定的超时工作,但这显然是不受欢迎的。 问题:我在callback结构中做了什么错误? 为什么在捆绑完成之前调用它? 我在Gulp的代码: var server = new WebpackDevServer(webpack(devWebpackConfig), devServerConfig); server.listen(options.devServerPort || 8080, 'localhost', function(err) { if(err) { console.error('[webpack-dev-server] failed to start:', err); } else { console.log('[webpack-dev-server] started:', 'Browse to http://localhost:'+ options.devServerPort +'/webpack-dev-server/'); } }); 电stream输出: [14:43:43] Finished 'dev' after 66 ms [webpack-dev-server] started: Browse to http://localhost:8002/webpack-dev-server/ Hash: 638bdaa3201a4220c58e Version: webpack 1.9.5 […]

NodeJS和Angular 2

我想创build与nodeJS和angular2作为客户端框架的应用程序。 例如,我有路线: app.get('/', function(req, res){ res.render('home'); }); app.get('/about', function(req, res){ res.render('about'); }); app.get('/dash', function(req, res){ res.sendFile(__dirname + 'path-to-angular2-index-file.html'); }); app.listen(3000); 然而,Angular2教程没有涉及到这些,agular-cli自带的方法: 通过开发服务器生成和提供Angular2项目 我有以下文件夹结构: NodeJSWebsite –node_modules –public –|–img –|–css –|–js –|–templates —-|–home.hbs —-|–about.hbs –server.js –package.json 有没有一个很好的和简单的方法来编译/构buildangular2应用程序和呈现html文件,所以我可以使用我的路线?

需要帮助了解吞咽和webpackstream如何工作

所以我有一个Gulp文件(工作)和一个Webpack文件(工作)。 现在我想把它们结合起来,这样我只需要运行webpack来观察和编译SCSS文件。 看着webpack主页我可以使用一个叫做webpack-stream东西 var gulp = require('gulp'); var webpack = require('webpack-stream'); gulp.task('default', function() { return gulp.src('src/entry.js') .pipe(webpack()) .pipe(gulp.dest('dist/')); }); 我不明白我在这里读到什么。 而且我不会用pipe道来家庭。 – 第一段代码,这是否进入gulpfile.js? – 什么是entry.js? – 这段代码是做什么的? 上面的代码将src / entry.js编译成带有webpack的资源,输出文件名是[hash] .js(webpack生成的哈希)。 或者传入你的webpack.config.js: return gulp.src('src/entry.js') .pipe(webpack( require('./webpack.config.js') )) .pipe(gulp.dest('dist/')); 我猜这是我的gulpfile.js? 我想我需要用茶勺递给我: – / 更新 我从@kannix和@JMM的帮助下得到了它的工作。 这是我的configuration文件: 吞 var gulp = require('gulp'); var sass = require('gulp-sass'); var […]

如何使用Webpack和Gulp多个入口点来传输应用程序和testing目录?

我正在构build一个基本的博客项目来练习使用React,ES6和Mochatesting框架。 我在我的default Gulp任务中遇到了麻烦,我的ES6testing和应用程序代码。 运行default任务时出现此错误,并更改./test/posts.js的内容以使watch生效: [11:17:29] Using gulpfile ~/WebstormProjects/blog/gulpfile.js [11:17:29] Starting 'default'… [11:17:29] Finished 'default' after 8.54 ms stream.js:75 throw er; // Unhandled stream error in pipe. ^ Error: invalid argument at pathToArray (/Users/christian/WebstormProjects/blog/node_modules/memory-fs/lib/MemoryFileSystem.js:44:10) at MemoryFileSystem.mkdirpSync (/Users/christian/WebstormProjects/blog/node_modules/memory-fs/lib/MemoryFileSystem.js:139:13) at MemoryFileSystem.(anonymous function) [as mkdirp] (/Users/christian/WebstormProjects/blog/node_modules/memory-fs/lib/MemoryFileSystem.js:279:34) at Compiler.<anonymous> (/Users/christian/WebstormProjects/blog/node_modules/webpack/lib/Compiler.js:229:25) at Compiler.applyPluginsAsync (/Users/christian/WebstormProjects/blog/node_modules/tapable/lib/Tapable.js:60:69) at Compiler.emitAssets (/Users/christian/WebstormProjects/blog/node_modules/webpack/lib/Compiler.js:226:7) at Watching.<anonymous> (/Users/christian/WebstormProjects/blog/node_modules/webpack/lib/Compiler.js:54:18) at […]

如何缩小gulp-webpack文件?

有以下情况: gulp.task('webpack', function(cb) { gulp.src('webpack-init.js') .pipe(webpack({ output: { filename: 'bundle.js', }, })) .pipe(gulp.dest('./client/js')); cb(); }); 一切正常,但我想缩小输出文件。 如果我直接使用gulp-uglify – .pipe(webpack(…)) .pipe(uglify().on('error', gutil.log)) .pipe(gulp.dest('./client/js')); 有一个错误:“意外的令牌:punc())]”和其他的这种说法。