I'm new to full-stack development but used to doing front-end dev using Grunt to manage my workflow. I have successfully pushed my MEAN stack to GitHub from my virtual server and have cloned it locally. However, it doesn't clone node_modules and I therefore can't run Grunt locally. I did npm install to install dependencies, but grunting to view app in browser breaks and throws errors.
我是全栈开发的新手，但是我习惯用Grunt来管理我的工作流程。我已经成功地将我的MEAN stack从我的虚拟服务器推到GitHub上，并在本地克隆了它。但是，它没有克隆node_modules，因此我不能在本地运行Grunt。我安装npm是为了安装依赖项，但是在浏览器中断时查看应用程序会产生错误。
My question is, what is the best way to run Grunt locally and make changes to front-end (only /public folder) and then push them up to master? Like I said, after cloning repo to local machine I have to "npm install" to install dependencies, and running grunt locally results in errors that point to server set up. I only want to manipulate /public folder and push changes to github, and pull them from server to implement.
我的问题是，在本地运行Grunt并对前端(only /public文件夹)进行更改，然后将其推送到master的最佳方式是什么?就像我说过的，在克隆了repo到本地机器之后，我不得不“npm安装”来安装依赖项，并且在本地运行grunt导致了指向服务器设置的错误。我只想操作/公用文件夹，并将更改推到github上，并从服务器中拉出它们来实现。
Being new to dealing with the full-stack, what's the best practice for doing this? Is there a better way to do this? Should I only clone public folder in github (there isn't a configured grunt file in public though...)? Any help or direction is much appreciated. Please let me know if I need to clarify anything.
对于处理整个堆栈，什么是最好的实践?有更好的方法吗?我应该只克隆github上的公共文件夹吗?非常感谢您的帮助和指导。如果我需要澄清什么，请告诉我。
Update:
更新:
I've fixed all of my install errors, but saving my /public files on the Mean Stack does not change the browser view running on the correct port. I've gone through this scotch.io "Using Grunt in a mean-stack-application to try and specify the correct config settings from the ground up, but to now avail. Any suggestions on why my view isn't changing is appreciated. If it makes any difference, the mean stack file structure I'm working with is Digital Ocean's one-click MEAN stack.
我已经修复了所有的安装错误，但是在平均堆栈上保存我的/公共文件不会改变在正确端口上运行的浏览器视图。我喝了这杯苏格兰威士忌。io“在恶意堆叠应用程序中使用Grunt从头开始尝试并指定正确的配置设置，但是现在有用。任何关于为什么我的观点没有改变的建议都是值得赞赏的。如果有什么不同的话，我使用的平均堆栈结构就是Digital Ocean的一键平均堆栈。
Update 2:
更新2:
The file that I'm changing that isn't reflected in livereload is public/modules/core/views/header.client.view.html.
我正在修改的文件没有反映在livereload中，它是public/modules/core/view /header.client.view.html。
Here is my gruntfile:
这是我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']);
};
1 个解决方案
#1
3
I would highly recommend not storing the contents of node_modules (or any other package/dependency manager such as Bower, Component, etc.) The whole purpose of these tools is to resolve this stuff as needed for you. Only the configuration or package manifest needs to be stored and your build process should make sure this stuff is kept up to date or created if missing for you.
我强烈建议不要存储node_modules(或任何其他包/依赖管理器，如Bower、Component等)的内容。只需要存储配置或包清单，您的构建过程应该确保这些内容是最新的或为您所缺少的创建的。
When you work with a MEAN stack on Node, the first thing you usually do is make sure Node and your build environment is created. This only needs to be done once. First install Node, next install your global build tools. For grunt, the command is npm install -g grunt. You need to run this once on every computer or server that builds your project. Next, you install any package or dependency managers globally. For MEAN stack, this is frequently Bower. So next execute npm install -g bower.
当您使用节点上的平均堆栈时，您通常要做的第一件事是确保创建了节点和构建环境。这只需要做一次。首先安装节点，然后安装全局构建工具。对于grunt，命令是npm安装-g grunt。您需要在构建项目的每台计算机或服务器上运行一次。接下来，您将在全局安装任何包或依赖项管理器。对于平均堆栈，这通常是Bower。接下来执行npm安装-g bower。
A list of steps for setting up tools (for every machine that develops or builds your project, assuming you use Grunt) (basic example; YMMV):
设置工具的步骤列表(对于开发或构建项目的每台机器，假设您使用Grunt)(基本示例;YMMV):
- Install Node.js
- 安装node . js
- Install any additional platform requirements (Mongo, etc.)
- 安装任何附加的平台需求(Mongo等)
- Open a shell with node in the path and execute
npm install -g grunt-cli bower - 打开路径中带有节点的shell并执行npm安装-g grunt-cli bower
Now, you can initialize your project as usual to kick it off. You can piece it together as you see fit, or use a scaffolding tool (such as Yeoman) or seed project. Develop your project and commit as usual.
现在，您可以像往常一样初始化您的项目，以启动它。您可以根据需要将它拼凑在一起，或者使用一个脚手架工具(如Yeoman)或seed项目。开发您的项目并像往常一样提交。
If the next guy (or build server) wants to work with your project, they'll need to set up the dev environment just as you (from this example, they just install node and then execute npm install -g grunt-cli bower). Then they clone your repo, navigate to the directory, and execute npm install. They should now be able to build and run the project. For build servers, you will likely need to automate this prep stage. Any build service worth its salt will accomodate this, and how to do it depends on the software you're using.
如果下一个(或构建服务器)想要与您的项目一起工作，他们就需要像您一样设置开发环境(从这个示例中，他们只是安装节点，然后执行npm安装-g grunt-cli bower)。然后它们克隆您的repo，导航到目录，并执行npm安装。他们现在应该能够构建并运行项目。对于构建服务器，您可能需要自动化这个准备阶段。任何值得使用的构建服务都将满足这一需求，而如何做到这一点取决于您所使用的软件。
For deployment, it really depends on where and how you're deploying. Some systems (Heroku, for example, which monitors changes to a specific branch) can link right to your repo and when it detects pushed changes, it'll clone or fetch upstream, run the build system command you specify, and host from the Node.js app you specify. In other cases, you may need to build your project ahead of time and upload the results of your build task to the server. Your mileage may vary depending on the circumstances of your project.
对于部署，它实际上取决于部署的位置和方式。一些系统(例如Heroku，它监视对特定分支的更改)可以链接到您的repo，当它检测到推送的更改时，它将克隆或获取上游，运行您指定的构建系统命令，并从节点宿主。js应用指定。在其他情况下，您可能需要提前构建项目，并将构建任务的结果上载到服务器。您的里数可以根据项目的具体情况而有所不同。
Examining the boilerplate from something like Yeoman's generator-angular-fullstack generator I linked above, you can derive best practices for setting up a MEAN stack.
检查类似Yeoman的generator-angular-fullstack generator(我在上面链接)中的样板文件，您可以得到建立平均堆栈的最佳实践。
#1
3
I would highly recommend not storing the contents of node_modules (or any other package/dependency manager such as Bower, Component, etc.) The whole purpose of these tools is to resolve this stuff as needed for you. Only the configuration or package manifest needs to be stored and your build process should make sure this stuff is kept up to date or created if missing for you.
我强烈建议不要存储node_modules(或任何其他包/依赖管理器，如Bower、Component等)的内容。只需要存储配置或包清单，您的构建过程应该确保这些内容是最新的或为您所缺少的创建的。
When you work with a MEAN stack on Node, the first thing you usually do is make sure Node and your build environment is created. This only needs to be done once. First install Node, next install your global build tools. For grunt, the command is npm install -g grunt. You need to run this once on every computer or server that builds your project. Next, you install any package or dependency managers globally. For MEAN stack, this is frequently Bower. So next execute npm install -g bower.
当您使用节点上的平均堆栈时，您通常要做的第一件事是确保创建了节点和构建环境。这只需要做一次。首先安装节点，然后安装全局构建工具。对于grunt，命令是npm安装-g grunt。您需要在构建项目的每台计算机或服务器上运行一次。接下来，您将在全局安装任何包或依赖项管理器。对于平均堆栈，这通常是Bower。接下来执行npm安装-g bower。
A list of steps for setting up tools (for every machine that develops or builds your project, assuming you use Grunt) (basic example; YMMV):
设置工具的步骤列表(对于开发或构建项目的每台机器，假设您使用Grunt)(基本示例;YMMV):
- Install Node.js
- 安装node . js
- Install any additional platform requirements (Mongo, etc.)
- 安装任何附加的平台需求(Mongo等)
- Open a shell with node in the path and execute
npm install -g grunt-cli bower - 打开路径中带有节点的shell并执行npm安装-g grunt-cli bower
Now, you can initialize your project as usual to kick it off. You can piece it together as you see fit, or use a scaffolding tool (such as Yeoman) or seed project. Develop your project and commit as usual.
现在，您可以像往常一样初始化您的项目，以启动它。您可以根据需要将它拼凑在一起，或者使用一个脚手架工具(如Yeoman)或seed项目。开发您的项目并像往常一样提交。
If the next guy (or build server) wants to work with your project, they'll need to set up the dev environment just as you (from this example, they just install node and then execute npm install -g grunt-cli bower). Then they clone your repo, navigate to the directory, and execute npm install. They should now be able to build and run the project. For build servers, you will likely need to automate this prep stage. Any build service worth its salt will accomodate this, and how to do it depends on the software you're using.
如果下一个(或构建服务器)想要与您的项目一起工作，他们就需要像您一样设置开发环境(从这个示例中，他们只是安装节点，然后执行npm安装-g grunt-cli bower)。然后它们克隆您的repo，导航到目录，并执行npm安装。他们现在应该能够构建并运行项目。对于构建服务器，您可能需要自动化这个准备阶段。任何值得使用的构建服务都将满足这一需求，而如何做到这一点取决于您所使用的软件。
For deployment, it really depends on where and how you're deploying. Some systems (Heroku, for example, which monitors changes to a specific branch) can link right to your repo and when it detects pushed changes, it'll clone or fetch upstream, run the build system command you specify, and host from the Node.js app you specify. In other cases, you may need to build your project ahead of time and upload the results of your build task to the server. Your mileage may vary depending on the circumstances of your project.
对于部署，它实际上取决于部署的位置和方式。一些系统(例如Heroku，它监视对特定分支的更改)可以链接到您的repo，当它检测到推送的更改时，它将克隆或获取上游，运行您指定的构建系统命令，并从节点宿主。js应用指定。在其他情况下，您可能需要提前构建项目，并将构建任务的结果上载到服务器。您的里数可以根据项目的具体情况而有所不同。
Examining the boilerplate from something like Yeoman's generator-angular-fullstack generator I linked above, you can derive best practices for setting up a MEAN stack.
检查类似Yeoman的generator-angular-fullstack generator(我在上面链接)中的样板文件，您可以得到建立平均堆栈的最佳实践。