如何定义GruntJS的服务?

时间:2013-05-11 14:45:39

标签: node.js angularjs npm gruntjs yeoman

我正在关注新的Google Developers视频Automating Your Front-End Workflow With Yeoman 1.0,而且事情并没有像Addy那样真正起作用。

当我grunt server运行/mytodo/dist/index.html grunt时会在http://localhost:9000/打开/mytodo/dist/views/main.html。为什么它不像Addy一样加载/mytodo/app/views/main.html/mytodo/Gruntfile.js

这是我的'use strict'; var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet; var mountFolder = function (connect, dir) { return connect.static(require('path').resolve(dir)); }; module.exports = function (grunt) { // load all grunt tasks require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); // configurable paths var yeomanConfig = { app: 'app', dist: 'dist' }; try { yeomanConfig.app = require('./component.json').appPath || yeomanConfig.app; } catch (e) {} grunt.initConfig({ yeoman: yeomanConfig, watch: { coffee: { files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'], tasks: ['coffee:dist'] }, coffeeTest: { files: ['test/spec/{,*/}*.coffee'], tasks: ['coffee:test'] }, compass: { files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'], tasks: ['compass'] }, livereload: { files: [ '<%= yeoman.app %>/{,*/}*.html', '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css', '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js', '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' ], tasks: ['livereload'] } }, connect: { options: { port: 9000, // Change this to '0.0.0.0' to access the server from outside. hostname: 'localhost' }, livereload: { options: { middleware: function (connect) { return [ lrSnippet, mountFolder(connect, '.tmp'), mountFolder(connect, yeomanConfig.app) ]; } } }, test: { options: { middleware: function (connect) { return [ mountFolder(connect, '.tmp'), mountFolder(connect, 'test') ]; } } } }, open: { server: { url: 'http://localhost:<%= connect.options.port %>' } }, clean: { dist: { files: [{ dot: true, src: [ '.tmp', '<%= yeoman.dist %>/*', '!<%= yeoman.dist %>/.git*' ] }] }, server: '.tmp' }, jshint: { options: { jshintrc: '.jshintrc' }, all: [ 'Gruntfile.js', '<%= yeoman.app %>/scripts/{,*/}*.js' ] }, karma: { unit: { configFile: 'karma.conf.js', singleRun: true } }, coffee: { dist: { files: [{ expand: true, cwd: '<%= yeoman.app %>/scripts', src: '{,*/}*.coffee', dest: '.tmp/scripts', ext: '.js' }] }, test: { files: [{ expand: true, cwd: 'test/spec', src: '{,*/}*.coffee', dest: '.tmp/spec', ext: '.js' }] } }, compass: { options: { sassDir: '<%= yeoman.app %>/styles', cssDir: '.tmp/styles', imagesDir: '<%= yeoman.app %>/images', javascriptsDir: '<%= yeoman.app %>/scripts', fontsDir: '<%= yeoman.app %>/styles/fonts', importPath: '<%= yeoman.app %>/components', relativeAssets: true }, dist: {}, server: { options: { debugInfo: true } } }, concat: { dist: { files: { '<%= yeoman.dist %>/scripts/scripts.js': [ '.tmp/scripts/{,*/}*.js', '<%= yeoman.app %>/scripts/{,*/}*.js' ] } } }, useminPrepare: { html: '<%= yeoman.app %>/index.html', options: { dest: '<%= yeoman.dist %>' } }, usemin: { html: ['<%= yeoman.dist %>/{,*/}*.html'], css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], options: { dirs: ['<%= yeoman.dist %>'] } }, imagemin: { dist: { files: [{ expand: true, cwd: '<%= yeoman.app %>/images', src: '{,*/}*.{png,jpg,jpeg}', dest: '<%= yeoman.dist %>/images' }] } }, cssmin: { dist: { files: { '<%= yeoman.dist %>/styles/main.css': [ '.tmp/styles/{,*/}*.css', '<%= yeoman.app %>/styles/{,*/}*.css' ] } } }, htmlmin: { dist: { options: { /*removeCommentsFromCDATA: true, // https://github.com/yeoman/grunt-usemin/issues/44 //collapseWhitespace: true, collapseBooleanAttributes: true, removeAttributeQuotes: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeOptionalTags: true*/ }, files: [{ expand: true, cwd: '<%= yeoman.app %>', src: ['*.html', 'views/*.html'], dest: '<%= yeoman.dist %>' }] } }, cdnify: { dist: { html: ['<%= yeoman.dist %>/*.html'] } }, ngmin: { dist: { files: [{ expand: true, cwd: '<%= yeoman.dist %>/scripts', src: '*.js', dest: '<%= yeoman.dist %>/scripts' }] } }, uglify: { dist: { files: { '<%= yeoman.dist %>/scripts/scripts.js': [ '<%= yeoman.dist %>/scripts/scripts.js' ] } } }, rev: { dist: { files: { src: [ '<%= yeoman.dist %>/scripts/{,*/}*.js', '<%= yeoman.dist %>/styles/{,*/}*.css', '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', '<%= yeoman.dist %>/styles/fonts/*' ] } } }, copy: { dist: { files: [{ expand: true, dot: true, cwd: '<%= yeoman.app %>', dest: '<%= yeoman.dist %>', src: [ '*.{ico,txt}', '.htaccess', 'components/**/*', 'images/{,*/}*.{gif,webp}', 'styles/fonts/*' ] }] } } }); grunt.renameTask('regarde', 'watch'); grunt.registerTask('server', [ 'clean:server', 'coffee:dist', 'compass:server', 'livereload-start', 'connect:livereload', 'open', 'watch' ]); grunt.registerTask('test', [ 'clean:server', 'coffee', 'compass', 'connect:test', 'karma' ]); grunt.registerTask('build', [ 'clean:dist', 'jshint', 'test', 'coffee', 'compass:dist', 'useminPrepare', 'imagemin', 'cssmin', 'htmlmin', 'concat', 'copy', 'cdnify', 'ngmin', 'uglify', 'rev', 'usemin' ]); grunt.registerTask('default', ['build']); }; 代码:

{{1}}

2 个答案:

答案 0 :(得分:0)

我也观看了视频并按照步骤操作,但由于某些原因,事情并没有像他们在视频中那样奏效。我张贴了一篇帖子,描述了我必须做些什么才能让它运行(http://dabwcode.blogspot.com/2013/05/creating-angular-app-with-yeoman-bower.html

基本上有2件事,Yeoman没有安装所需的所有组件。实际上Yeoman设置了脚手架和app / controller,但是甚至没有安装所需的角度组件。所以我不得不使用Bower独立安装这些组件。

其次,我在Windows上并且在我的机器上不再使用Ruby,因此Grunt在尝试使用Compass包时会抛出错误。所以,这是第二个问题。删除Gruntfile中的那个修复了它。

答案 1 :(得分:0)

我遇到了同样的问题 - 它没有加载部分.html文件而且我无法使用E2E测试。

我使用$templateCacheGruntJS addon for it解决了这个问题,如果你想让它使用Grunt的话。

这可能不是解决问题的最佳方式,而且很可能在没有$templateCache的情况下正确配置它。