我是全栈开发的新手，但曾经使用Grunt进行前端开发来管理我的工作流程。 我已经成功地将MEAN堆栈从我的虚拟服务器推送到GitHub，并在本地克隆了它。 但是，它不会克隆node_modules，因此无法在本地运行Grunt。 我做了npm install来安装依赖项，但是不愿意在浏览器中查看应用程序并抛出错误。
我的问题是，在本地运行Grunt并更改前端（仅/ public文件夹）然后将其推送到master的最佳方法是什么？ 就像我说的那样，在将仓库克隆到本地计算机后，我必须“ npm install”来安装依赖项，而在本地运行grunt会导致指向服务器设置的错误。 我只想操纵/ public文件夹并将更改推送到github，然后将其从服务器中拉出以实现。
刚开始处理全栈游戏时，最佳做法是什么？ 有一个更好的方法吗？ 我应该只在github中克隆公用文件夹吗（尽管公共中没有配置的grunt文件...）？ 任何帮助或指示将不胜感激。 请让我知道是否需要澄清任何事情。
更新：
我已经解决了所有安装错误，但是将/ public文件保存在平均堆栈上并不会更改在正确端口上运行的浏览器视图。 我已经看过这个scotch.io：“在均值堆栈应用程序中使用Grunt尝试从头开始指定正确的配置设置，但现在仍然有效。对于为什么我的观点没有改变的任何建议，我们深表感谢。如果有什么不同，我正在使用的平均堆栈文件结构是Digital Ocean的一键式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']);
};
我强烈建议不要存储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 ）或种子项目。 开发项目并像往常一样提交。
如果下一个家伙（或构建服务器）想要处理您的项目，他们将需要像您一样设置开发环境（在此示例中，他们只是安装节点，然后执行npm install -g grunt-cli bower ） 。 然后他们克隆您的存储库，导航到目录，然后执行npm install。 他们现在应该能够构建和运行该项目。 对于构建服务器，您可能需要自动化此准备阶段。 任何值得花点时间的构建服务都会适应这一点，并且如何执行取决于您所使用的软件。
对于部署，这实际上取决于您在何处以及如何进行部署。 某些系统（例如，Heroku，它监视特定分支的更改）可以直接链接到您的存储库，并且当它检测到推送的更改时，它将克隆或获取上游，运行您指定的build system命令，并从Node进行托管您指定的.js应用。 在其他情况下，您可能需要提前构建项目，并将构建任务的结果上传到服务器。 您的里程可能会因项目情况而异。
从上面链接的Yeoman的generator-angular-fullstack生成器中检查样板，您可以得出建立MEAN堆栈的最佳实践。