Articles of gulp webpack

从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())]”和其他的这种说法。

避免多次调用任务完成callback?

考虑到下面的一些吞咽任务,我可以成功地启动gulp,webpack和nodemon进程,但是webpack任务是开放式的,所以当他们的watch / compile周期完成时,他们将继续触发完成处理程序。 服务器任务取决于客户端任务输出,所以我需要这些操作是同步的,因此done function onBuild(done) { return function(err, stats) { if(err) { gutil.log('Error', err); if(done) { done(); } } else { Object.keys(stats.compilation.assets).forEach(function(key){ gutil.log('Webpack: output ', gutil.colors.green(key)); }); gutil.log('Webpack: ', gutil.colors.blue('finished ', stats.compilation.name)); if(done) { done(); } } } } //dev watch gulp.task('webpack-client-watch', function(done) { webpack(devConfig[0]).watch(100, function(err, stats) { onBuild(done)(err, stats); }); }); gulp.task('webpack-server-watch', function(done) […]