我是全栈开发的新手，但过去常常使用Grunt来管理我的工作流程。我已经成功地将我的MEAN堆栈从我的虚拟服务器推送到GitHub并在本地克隆了它。但是，它没有克隆node_modules，因此我无法在本地运行Grunt。我做了npm install来安装依赖项，但是在浏览器中断时查看应用程序并引发错误。
我的问题是，在本地运行Grunt并对前端（仅/ public文件夹）进行更改然后将它们推送到主服务器的最佳方法是什么？就像我说的，克隆回购到本地机器后，我必须＆＃34; npm install＆＃34;安装依赖项，并在本地运行grunt会导致指向服务器设置的错误。我只想操作/公共文件夹并将更改推送到github，并将它们从服务器中拉出来实现。
对于处理全栈的新手，这样做的最佳做法是什么？有一个更好的方法吗？我应该只在github中克隆公共文件夹（虽然没有公开配置的grunt文件......）？任何帮助或方向都非常感谢。如果我需要澄清任何事情，请告诉我。
更新
我修复了所有安装错误，但在Mean Stack上保存我的/ public文件并不会改变在正确端口上运行的浏览器视图。我已经完成了this scotch.io "Using Grunt in a mean-stack-application 尝试从头开始指定正确的配置设置，但现在可用。关于为什么我的观点不会发生变化的任何建议都表示赞赏。如果它有所不同，我使用的平均堆栈文件结构是Digital Ocean's one-click MEAN stack。
更新2：
我更改的文件未反映在livereload中public/modules/core/views/header.client.view.html。
这是我的gruntfile：
'use strict';
module.exports = function(grunt) {
// Unified Watch Object
var watchFiles = {
serverViews: ['app/views/**/*.*'],
serverJS: ['gruntfile.js', 'server.js', 'config/**/*.js', 'app/**/*.js'],
clientViews: ['public/modules/**/views/**/*.html'],
clientJS: ['public/js/*.js', 'public/modules/**/*.js'],
clientCSS: ['public/modules/**/*.css'],
mochaTests: ['app/tests/**/*.js']
};
// Project Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
options: { livereload: true },
serverViews: {
files: [watchFiles.serverViews],
options: {
livereload: true
}
},
serverJS: {
files: watchFiles.serverJS,
tasks: ['jshint'],
options: {
livereload: true
}
},
clientViews: {
files: watchFiles.clientViews,
options: {
livereload: true,
}
},
clientJS: {
files: watchFiles.clientJS,
tasks: ['jshint'],
options: {
livereload: true
}
},
clientCSS: {
files: watchFiles.clientCSS,
tasks: ['csslint'],
options: {
livereload: true
}
}
},
jshint: {
all: {
src: watchFiles.clientJS.concat(watchFiles.serverJS),
options: {
jshintrc: true
}
}
},
csslint: {
options: {
csslintrc: '.csslintrc',
},
all: {
src: watchFiles.clientCSS
}
},
uglify: {
production: {
options: {
mangle: false
},
files: {
'public/dist/application.min.js': 'public/dist/application.js'
}
}
},
cssmin: {
combine: {
files: {
'public/dist/application.min.css': '<%= applicationCSSFiles %>'
}
}
},
nodemon: {
dev: {
script: 'server.js',
options: {
nodeArgs: ['--debug'],
ext: 'js,html',
watch: watchFiles.serverViews.concat(watchFiles.serverJS)
}
}
},
'node-inspector': {
custom: {
options: {
'web-port': 1337,
'web-host': 'localhost',
'debug-port': 5858,
'save-live-edit': true,
'no-preload': true,
'stack-trace-limit': 50,
'hidden': []
}
}
},
ngAnnotate: {
production: {
files: {
'public/dist/application.js': '<%= applicationJavaScriptFiles %>'
}
}
},
concurrent: {
default: ['nodemon', 'watch'],
debug: ['nodemon', 'watch', 'node-inspector'],
options: {
logConcurrentOutput: true,
limit: 10
}
},
env: {
test: {
NODE_ENV: 'test'
}
},
mochaTest: {
src: watchFiles.mochaTests,
options: {
reporter: 'spec',
require: 'server.js'
}
},
karma: {
unit: {
configFile: 'karma.conf.js'
}
}
});
// Load NPM tasks
require('load-grunt-tasks')(grunt);
// Making grunt default to force in order not to break the project.
grunt.option('force', true);
// A Task for loading the configuration object
grunt.task.registerTask('loadConfig', 'Task that loads the config into a grunt option.', function() {
var init = require('./config/init')();
var config = require('./config/config');
grunt.config.set('applicationJavaScriptFiles', config.assets.js);
grunt.config.set('applicationCSSFiles', config.assets.css);
});
// Default task(s).
grunt.registerTask('default', ['lint', 'concurrent:default']);
// Debug task.
grunt.registerTask('debug', ['lint', 'concurrent:debug']);
// Lint task(s).
grunt.registerTask('lint', ['jshint', 'csslint']);
// Build task(s).
grunt.registerTask('build', ['lint', 'loadConfig', 'ngAnnotate', 'uglify', 'cssmin']);
// Test task.
grunt.registerTask('test', ['env:test', 'mochaTest', 'karma:unit']);
};
答案 0 :(得分：3)
我强烈建议不要存储node_modules（或任何其他包/依赖管理器，如Bower，Component等）的内容。这些工具的全部目的是根据需要解决这些问题。只需要存储配置或包清单，并且您的构建过程应确保这些内容保持最新，或者如果您遗失则创建。
当您在Node上使用MEAN堆栈时，您通常要做的第一件事就是确保创建Node和您的构建环境。这只需要做一次。首先安装Node，然后安装全局构建工具。对于grunt，命令为npm install -g grunt。您需要在构建项目的每台计算机或服务器上运行一次。接下来，全局安装任何包或依赖关系管理器。对于MEAN堆栈，这通常是Bower。接下来执行npm install -g bower。
设置工具的步骤列表（对于开发或构建项目的每台机器，假设您使用Grunt）（基本示例; YMMV）：
npm install -g grunt-cli bower 现在，您可以像往常一样初始化项目以启动它。您可以根据需要将它拼凑在一起，或使用脚手架工具（例如Yeoman）或种子项目。开发您的项目并照常提交。
如果下一个人（或构建服务器）想要使用你的项目，他们就像你一样需要设置开发环境（从这个例子中，他们只是安装节点然后执行{{1} }）。然后他们克隆你的repo，导航到目录，然后执行npm install。他们现在应该能够构建和运行项目。对于构建服务器，您可能需要自动执行此准备阶段。任何有价值的构建服务都可以适应这种情况，如何做到这一点取决于你使用的软件。
对于部署，它实际上取决于您在何处以及如何部署。某些系统（例如，监控特定分支的更改的Heroku）可以直接链接到您的仓库，当它检测到推送的更改时，它将克隆或获取上游，运行您指定的构建系统命令，并从您指定的Node.js应用程序。在其他情况下，您可能需要提前构建项目并将构建任务的结果上载到服务器。您的里程可能会因项目的具体情况而有所不同。
从我上面链接的Yeoman＆＃39; generator-angular-fullstack生成器这样的内容中检查样板文件，您可以获得设置MEAN堆栈的最佳实践。