Articles of gruntjs

主要是静态的快递应用程序与一个服务器端路由

我有一个应用程序,我正在开发使用快递几乎是一个纯粹的静态网站,除了发布到服务器(联系表格和请求表单)的两种forms。 该网站大约有10个静态页面和两个服务器端path来接受表单提交。 我开始用jade,stylus和coffeescript开发应用程序的前端,使用grunt作为开发服务器和构build工具来输出所有这些静态资产的生产就绪版本(concat,min等等)。 现在到两个服务器端路由。 我很好奇人们的想法是在这种情况下,应用程序包含90%的静态HTML,只有一个或两个服务器端路线。 到目前为止,我已经考虑了三种select 选项1:纯粹的静态HTML,将这两种forms“外包”给像Wufoo这样的人 这将消除在生产中完全expression的需要。 我可以继续使用grunt来构build应用程序。 不过,我不喜欢这种方法,因为我不会完全控制表单提交。 更何况,提交免费帐户的表格数量是有限的。 选项#2:纯粹服务器端使用快递和翡翠 我不喜欢这种方法,因为我会定义10个左右的服务器端路由,所有这些只是简单地呈现一个玉模板。 这不是矫枉过正吗? 我的路线将被放在callback中包含单个res.render()调用中。 另外,即使我们可能说毫秒,为什么在不需要它的页面上包含中间件? 选项#3:使用express.static()中间件混合#1和#2 对于这个选项,我会用grunt-express之类的东西。 这是我最喜欢的select,但是混合客户端和服务器端的玉石模板似乎有点“肮脏”。 我的意思是,快速应用程序将有(两个)服务器端路由,负责渲染一个玉模板。 通过调用express.static()指向一个包含静态HTML文件的目录,这个静态HTML文件是由玉来编译的,这对我来说似乎有点“肮脏”。 我不知道为什么。 如果我select选项#3,我的grunt构build脚本将如何工作? 最好,我希望构build输出dist/文件夹,其中包含生产就绪快递的应用程序,包括我的小小app.js文件。 任何想法,非常感谢!

更新:用户错误 – TYPO! grunt-contrib-coffee错误查找文件并写入目的地

在我的Gruntfile.js中,我将咖啡任务configuration为如此,并在src/目录中存在一个script.coffee文件: coffee: { dist: { files: [{ /* FIX: exapand: true, */ expand: true, cwd: 'src/', src: '**/*.coffee', dest: 'lib/', ext: '.js' }] } } 运行grunt coffee ,出现以下错误 : Running "coffee:dist" (coffee) task >> Source file "script.coffee" not found. >> Destination (lib/) not written because compiled files were empty. script.coffee的内容是testingcoffeescriptconfiguration的一些代码,并且在我从命令行运行coffee -c script.coffee时完美地编译。 script.coffeelogging: # A […]

Grunt / NodeJs – 在Windows环境下调用ant命令作为产生进程

在一个Windows环境的咕噜生成过程中,我想调用两个ant命令作为产卵进程,以便能够跟踪输出。 它如下所示: grunt.registerTask('app-clean', 'Cleaning tasks', function() { var done = this.async(); if (context.device.platform === 'android' || context.device.platform === 'all') { spawnProcess('ant', ['clean'], { cwd: path.resolve(context.android) }, done); } }); grunt.registerTask('app-build', 'Building tasks', function() { var done = this.async(); if (context.device.platform === 'android' || context.device.platform === 'all') { spawnProcess('ant', ['release'], { cwd: path.resolve(context.android) }, done); } […]

grunt:将图像转换为base64并插入到html中

用grunt和grunt-preprocess来准备我的html文件。 如何将图像标签( <img src="/some/image"> )replace为其base64内联副本

我想创build使用yeoman和骨干的示例应用程序,但显示一些错误任何人都可以帮助我吗?

我有alerady安装下面的东西在电脑 节点 NPM 自耕农 骨干发电机 ruby与萨斯和指南针 但在命令提示符下运行grunt命令时仍然显示以下错误。 C:\ Users \ Nirav \ Desktop \ Backbone \ NodeWebkit \ TestYeoman> grunt build运行“clean:dist”(clean)任务清理.tmp …确定 运行“咖啡:dist”(咖啡)任务 运行“咖啡:testing”(咖啡)任务 运行“createDefaultTemplate”任务 运行“jst:compile”(jst)任务 由于编译的文件是空的 运行“compass:dist”(指南针)任务C:/Ruby193/lib/ruby/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:135:in require': cannot load such file — sass/script/node (LoadError) from C:/Ruby193/lib/ruby/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:135:in rescue in require'from C:/Ruby193/lib/ruby/site_ruby/1.9.1/ rubygems / core_ext / kernel_require.rb:144:in require' from C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches/browser_support.rb:1:in从C:/Ruby193/lib/ruby/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:55:in require' from C:/Ruby193/lib/ruby/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:55:in require'from C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches.rb:2:in […]

grunt-spritesmithconfiguration在gruntfile.js上无法正常工作

在我的gruntfile.js中,我为插件生成了精灵。 我必须说,一切都已经configuration好了,spritesmith通过npm install来安装,插件是package.json中的一个依赖项。 但还有其他的东西阻塞了我的精灵命令的执行 sprite:{ dist: { src: ['css/theme/images/*.jpg'], destImg: 'css/theme/sprite/sprite.jpg', destCSS: 'css/theme/sprite/spritejpg.css' } }, 这是我的结果,但是这个消息并不是最好的。 C:\wamp\www\myproject>grunt sprite Running "sprite:dist" (sprite) task Fatal error: spawn ENOENT 它可能是什么?

无法通过命令行安装Grunt

我正在尝试安装Grunt命令行,并且在安装时遇到困难。 我非常仔细地跟着克里斯·科伊尔的演练,看不出我哪里出错了。 我的项目名称是'ryan',这里是我的package.json: { "name": "ryan", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.2" } } 作为node_modules被安装到项目文件夹中,Grunt似乎安装得很好。 但是,一旦我input'npm install -g grunt-cli',似乎就失败了。 任何解决scheme 我的terminal: ryans-mbp:ryan rynslmns$ npm install -g grunt-cli npm http GET https://registry.npmjs.org/grunt-cli npm http 304 https://registry.npmjs.org/grunt-cli npm ERR! Error: EACCES, mkdir '/usr/local/lib/node_modules/grunt-cli' npm ERR! { [Error: EACCES, mkdir '/usr/local/lib/node_modules/grunt-cli'] npm ERR! errno: 3, npm ERR! code: […]

删除引导3默认样式

对于最近的网站,客户有5种不同的品牌造型的颜色。 所以为了跟踪更less的文件(我们使用节点编译为一个最终的css文件)中的所有内容,我将颜色定义为更less的variables,并使用.button-variant()混合来生成样式。 例如 @color-cta-light: #df134d; @color-cta-dark: #860c2f; @color-cta-background: #fcf7fa; .btn-cta { .button-variant(#ffffff, @color-cta-light, @color-cta-dark); } 这工作正常。 不过,我也是使用面板来完成的,现在我已经结束了一个11,000行的css文件。 这是很长的,因为我们需要大多数默认的Bootstrap样式(如.btn样式)以及我的自定义样式。 我想知道的是(并保持它只是简单地使用button作为例子)是否有一个很好的简单的方法来删除在CSS属于默认的引导button样式,即btn成功,btn警告,等等,简单,我的意思是自动的。 我们使用节点lessc模块来编译较less的文件(使用grunt watcher),所以我想象一下在编译之后需要发生什么。 或者,我应该只是修改默认引导混合,什么也不做,并使用我自己的自定义混合? 我觉得这样可以工作,但是这意味着每一个新版本的Bootstrap(当前3.1)都花费额外的时间来确保自定义的mixin是最新的。 我希望最终是一个单一的样式表,从button.less默认button样式没有未使用的CSS额外的重载。 有我的理解,这是不可能的,但我希望有一些工具,我不知道这将有助于我的情况。

为什么摩卡testing不能运行在特拉维斯,但本地?

我有这个 – https://github.com/eppz/eppz-js – 安装在哪里testing运行本地就好( 4 passing )。 但是在Travis CI上部署的testing都没有runnig ( 0 passing )。 请参阅package.json , Gruntfile.js , .travis.yml , Travis构build 。 有人可以简单的看一下吗? // Local Running "mocha:test" (mocha) task Testing: Tests/index.html >> 4 passed! (0.00s) Done, without errors. // Travis CI Running "mocha:test" (mocha) task >> 0 passed! (0.00s) Done, without errors.

Grunt在本地安装node_modules

我有一个Gruntfile来安装一些npm并使其他function。 问题是:npm的下载工作正常,但在全局下载node_modules /User/my_user/node_modules 我想要gruntfiledynamic地下载我的项目在本地,而不指定path。 这是我的grunt文件的一部分: module.exports = function(grunt) { grunt.initConfig({ shell: { install: { options: { stdout: true, stderr: true }, command: [ "npm install grunt-contrib-sass", "npm install node-sass", "npm install grunt-contrib-less", "npm install less", "npm install grunt-contrib-watch", "npm install grunt-contrib-clean", "npm install grunt-contrib-copy", "npm install grunt-csso", "npm install grunt-deployments" ].join("&&") }, install_test: { options: […]