Articles of 捆绑和缩小

Uglify和缩小Angular 4代码

我在VS 2017中使用Asp Core + Angular 4模板+ webpack。我已经发布了我的应用程序..并期待ClientApp / dist / main-server.js我看到内容不uglify和minify ..这是喜欢这个 … ConfirmComponent.prototype.ngAfterViewInit = function () { try { $('.modal').removeClass('fade'); setTimeout(function () { $('.modal').addClass('fade'); }, 500); } catch (exception) { } }; … 在webpack.config.vendor.js我可以看到一个插件调用: …. plugins: [ extractCSS, new webpack.DllPlugin({ path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), name: '[name]_[hash]' }) ].concat(isDevBuild ? [] : [ new […]

Webpack构build成功,但是npm webpack没有构build输出

在命令提示符下,如果我inputwebpack然后回车,输出entry.min.js就可以正确的生成了。 但是,如果我inputnpm build并按回车,则不会生成任何内容。 我的package.json或webpack.config.js有什么问题吗? 顺便说一句,有没有办法生成一个捆绑的&缩小的CSS而不是一个JS文件? 因为input是一个CSS文件,但它给了我一个JS文件。 的package.json { "name": "assets", "version": "0.1.0", "description": "Front End Assets", "scripts": { "build": "webpack" }, "author": "", "license": "Mozilla Public License Version 2.0", "dependencies": { "webpack": "^1.13.1", "typescript": "^1.8.10" }, "devDependencies": { "css-loader": "^0.23.1", "style-loader": "^0.13.1", "webpack-dev-server": "^1.14.1" } } WebPack.config.js module.exports = { entry: { entry:"./src/entry.js" }, output: […]

用browserify捆绑js文件

我正在与Angularjs合作,作为我的前端。 我正在使用grunt作为构build工具,但现在我想切换到npm作为我的构build工具按照下面的链接。 npm脚本作为构build工具 现在的实际问题是捆绑JS没有Grunt 在Grunt中,我们可以有相当简单的configuration任务。 在下面提到js: ["src/*.js", "src/**/*.js", "!src/apiG/*.js", "!src/apiG/**/*.js"] 现在按照我有限的知识Browserify可以用于捆绑我所有的本地JavaScript(如果有人可以build议我任何其他包捆绑我的JavaScript文件..欢迎! 随着browserify我已经尝试以下在我的package.json,但它没有工作 "build:bundle": "browserify "src/*.js", "src/**/*.js", "!src/apiG/*.js", "!src/apiG/**/*.js" -o ./dist/js/bundle.js", 任何人都可以build议我如何捆绑嵌套的JavaScript与所有选项,如忽略和所有。 在浏览器中。 我不想用“require()”来包含所有的javascript。 只是想简单地捆绑我的项目中的所有文件,并忽略供应商文件。 等等.. 如果有人也可以build议缩小。 :)(我期待太多,我知道:)) 提前致谢。

Webpack:是否有可能在编译时评估JavaScriptexpression式?

我正在尝试为我的项目安装webpack。 该项目足够大,并提供多种语言。 我希望每个语言都提供每个入口点作为单独的文件。 我的语言文件不仅仅是简单的JSON,而是JavaScript。 所以i18n插件不符合我的需求。 解决scheme似乎与i18n插件类似: var languages = ['en', 'fr', 'de']; module.exports = languages.map(function (lang) { return { name: lang, // some other language-dependent config } }) 然后在我的一些脚本中,我想使用环境variables来要求本地化文件: var lang = …; // some environment variable, available only at compile time var l10n = require('./lang/' + lang); 但默认情况下,webpack会尝试在括号之间存储该expression式,假定稍后在浏览器中对其进行评估。 那么有没有办法告诉webpack立即评估? 或者,也许有人有一个更好的解决我的问题?

Grunt构build导致Angular应用程序在dist上崩溃

我正在使用Grunt并执行cmd“grunt build”来创build包含AngularJS应用程序的分发文件夹。 作为一个独立的我的应用程序工作正常。 一旦我创build了应用程序的发行版,应用程序开始很快崩溃。 我看到在F12工具控制台是: 达到10 $ digest()迭代。 中止! 我怀疑我的.tmp目录中的一个文件名为vendor.js,并且由于控制器dependency injectionvariables将注入的控制器参数(例如“$ scope”)注入到“a”中,所以无法正确缩小,uglify和/即使我正在使用ngAnnotate。 请参阅我正在使用UglifyJs和Uglify和Concat之前调用ngAnnotate,但我不能从useMinPrepare中删除UglifyJs,或者我有其他的错误,如脚本目录甚至不是在我的dist目录中创build: useminPrepare: { html: '<%= yeoman.app %>/index.html', options: { dest: '<%= yeoman.dist %>', flow: { html: { steps: { js: ['concat', 'uglifyjs'], css: ['cssmin'] }, post: {} } } } }, 我在我的GruntJs文件中设置mangle = false,但我怀疑useMinPrepare js: ['concat', 'uglifyjs']更改执行顺序并运行uglify之前ngAnnotate可以运行时调用useMin ,即使我调用后, ngAnnotate 。 我是新来的Grunt,这个应用程序已经从另一个开发人员传给我。 我发现这篇文章对我来说并不完全有意义,也不是一个代码更改似乎适用于我的Gruntfile.js,但我想也许我正在做的事情: https://github.com/DaftMonk/generator-angular-fullstack/issues/164 […]

指纹外部生成静态内容(ASP.NET + browserify)

在构build模块化js应用程序时,Nodejs browserify非常棒。 如果gulp也是安装程序的一部分,工作stream将进一步增强,以pipe理和解决依赖关系, 正确捆绑,uglify与源代码,自动填充,jshint,testing…这对于css以及预处理,自动前缀,linting,embedded资源和生成文档。 TL; DR:使用npm / bower可以访问前端库的广泛生态系统,使nodej成为客户端代码的完美构build(不一定是服务!)。 事实上,将它用于客户端代码是非常棒的,以便在VS 2015中支持npm , bower和grunt / gulp 。与此同时,我们设置了一个运行预编译和写入的吞吐任务dist js / css(打包输出)。 指纹url引用外部静态内容的好方法是什么? 从长远来看,我们最好能够将客户端内容完全分开,以便可以独立构build和部署到CDN,而无需构build其他应用程序。

使用Webpack,是否可以仅生成CSS,不包括output.js?

我正在用extract-text-webpack-plugin使用Webpack 。 在我的项目中,我有一些构build脚本。 其中一个构build脚本应该只捆绑和缩小CSS。 由于我使用其他脚本的Webpack,我发现使用Webpack是个好主意,即使我只想捆绑和缩小CSS 。 它工作正常,除了我不能摆脱output.js文件。 我不想要结果的webpack输出文件。 我只想为这个特定的脚本的CSS。 有没有办法摆脱由此产生的JS? 如果没有,你是否build议其他特定的工具来处理CSS? 谢谢。