I am currently using yo generator-angular scaffold to create base for building a couple of projects sitting on identical code base.
I want to know if there's any good pointers that can allow me to use the grunt tools to perform two different builds without been verbose like grunttask:project1, and more specifically with ngminPrepare how can you build more than one project at the same time?
the end result im looking for is as this
$grunt build:project1
$grunt build:project2
$grunt test:project1
$grunt serve:project1
To do multiple builds simultaneously you can use grunt-concurrent: https://www.npmjs.org/package/grunt-concurrent
You can just register a new task with the name you like:
concurrent: {
build: {
tasks: ['build:project1','build:project2']
}
}
grunt.loadNpmTasks('grunt-concurrent');
grunt.registerTask('buildall', ['concurrent:build']);
Related
Our application should have a main app and is consists of multiple modules and these modules have their own git repository.
The goal is to use the main app and turn the modules into packages that should only be referenced or called in the main app. Just like a DLL in C# or a component in Angular.
Now, I have looked thru sencha docs and all I can see is consolidating the modules into one single directory/workspace. We don't want to go that way because the modules have their own repo and the "main app" will also have its own repository.
Please recommend the best path to take.
I guess the simplest way is to define the workspace for the package inside each repo by adding this as workspace.json:
{
"frameworks": {
"ext": "ext"
},
"build": {
"dir": "${workspace.dir}/build"
},
"packages": {
"dir": "${workspace.dir}/packages/local,${workspace.dir}/packages",
"extract": "${workspace.dir}/packages/remote"
}
}
Now you need to link (symlink suggested) or copy the framework under /ext
Lets say you have the following structure
/root/workspace.json
/root/ext
/root/packages/local/yourModule
Now you can go to /root/packages/local/yourModule
and call
sencha package build
This should produce the package and js-files.
You will find the js files under
/root/packages/local/yourModule/build/yourModule.js
/root/packages/local/yourModule/build/yourModule-debug.js
These files can now be loaded on demand from your main app.
Depending on your needs you can optimize the build by adding
skip.sass=1
skip.examples=1
skip.slice=1
skip.pkg =1
in your package.json - or for legacy sencha cmd packages inside
/root/packages/local/yourModule/.sencha/sencha.cfg
A different approach could be by using another build tool.
You need to do inside:
/root/packages/local/yourModule/src
(put the files in the right order)
concat
remove whitespace *
uglify *
star means only relevant for the debug version of your module (package).
This is more less what a standard sencha cmd package build does.
I tried it successfully with grunt.
there is an idea to implement 'protractor core' which will be used by multiple projects for UI testing. At this moment I have an angular project 'project1' with e2e tests (cucumber-protractor-typescript) which are covering 'project1'. In future I expect 'project 2', 'project 3' ... which is also required UI testing. So I would like to have a separate project let's say 'protractor core' which could be used by any project for develop UI tests. The stucture should be smth like this:
project 1 >>> (has dependency to 'protractor core')
features
step_definitions > (access to api, smth common)
project 2 >>> (has dependency to 'protractor core')
features
step_definitions > (access to api, smth common)
project 3 >>> (has dependency to 'protractor core')
features
step_definitions > (access to api, smth common)
Really appreciate any examples, ideas, suggestions !
For a start, understand Protractor is not project related.
The config file you use to execute your tests will run every file you gave him. In your case, it could be from multiple project folder.
If you already have a config file for each project, create a new one at the top of every project, and give him all project.
One of the possibility is to use the option "suite"
Here a partial example of your config file (eg protractor.conf.js) could look like with this option
exports.config = {
suites: {
project1: ['Project1/tests/e2e/**/*.js'],
project2: ['Project2/tests/e2e/**/*.js'],
project3: ['Project3/tests/e2e/**/*.js']
},
// more option
Your config file needed to be on top the folder. If not, change path according to your structured folder you want. (again protractor is not project related, it's file related)
And you run your test like this:
protractor protractor.conf.js --suite project1
# depending on other option you have put in your config file
It's another subject. I don't talk about version control, but you will have to think about that for maintainability.
I'm actually working on something very similar right now. I think my situation is very similar to yours.
What I started noticing is that we have duplicate page objects and helper classes/functions across multiple projects. What we're doing is building an npm package for our protractor framework(page objects, helper classes, etc.) and placing it on our ProGet server. That way every team has access to the same framework and they can just pull it down into their projects just like you would any other npm package. Each project will have it's own config and tests but the framework can be shared across multiple projects and helps prevent duplicate resources across multiple repos.
This is a must-answer question that needs answered for a generation of coders.
I know to go to the website, but how do you actually download Backbone and start coding.
Most tutorials leave out this stage.
Thanks for helping!
Most Backbone code I see on stackoverflow is a real mess lacking structure which is a shame. But the flexibility in the right hands is also a very strong point that is why larger companies still use frequently choose Backbone whilst newbies would go for something with a little more magic out the box like Angular or Ember.
This is what I recommend in a general sense:
Grunt or gulp for tasks - grunt might be easier as it is more widely used still. Main tasks would be:
- build (compile and minify your code and css) and bundle into a build folder
- server (runs local server or a server from a build folder)
- test (if you have unit or functional tests)
Next you have an index.html file which contains an app wrapper and a single RequireJS call the the entry point of your code.
My folder structure would look something like this:
server/
server/server.js
public/
public/app/app.js
public/app/modules/
public/app/extensions/
public/assets/
public/assets/css/
public/assets/images/
public/packages/
public/index.html
dist/
dist/<env>/public/assets/
dist/<env>/public/app/app.min.js (or app.js depending on env)
package.json
Gruntfile.js
A colleague's boilerplate is probably the closest to my ideal setup in the public domain: https://github.com/mderrick/backbone-boilerplate
There is also marionette: http://marionettejs.com/
I am using angular/yeoman and my service is using a different url in DEV then in PROD. How can I automate this with grunt running build? Also, is there a way to have two different "dist" folders created (to deploy for two different servers, again same app some blocks of code needed to be excluded in DEV, but slightly changed for build)
// Development only for testing
var promise = $http.get('/fauxService/content.json')
// Build
var promise = $http.get('/realService/content.json')
You could use grunt-html-build and create different sections in your index.html for dev, test, uat, production environment.
In your case, I would probably use a "setting" service (where to put your constants to define your environment), with different versions depending on environment and choose the right configurations with specific grunt task (for example: https://github.com/williamverdolini/discitur-web/blob/master/Gruntfile.js#L392)
it could be a way
Using gulpjs and bower, Id like to start with the bower.json file to call on what package dependencies I want (ideally start the build with html 5 boilerplate, then backbone). Since the whole point of using gulp is for easy project management I would like to understand how to auto insert the scripts in to my project (pulling from the bower_components dir) and add the path to my head tags, I assume this is a responsibility gulp should be handling, in the link below I am under the impression grunt does provide this functionality, so if grunt can gulp should be able to.
This tut seems to cover everything I am looking for, except it is using gruntjs with the plugin "grunt-bowercopy" http://simonsmith.io/managing-bower-components-with-grunt/
So does anyone know how to get gulp and bower to play nicely. It would be cool to download the html 5 boilerplate, then for my javascript include backbone/jquery as well as some css like fontawesome and such with one command bower update, and have it insert the script tags in my header, and pull the main files I need into my project (this would kill a lot of tedious work). I assume grunt does handle this specifically with the "grunt-bowercopy" plugin, so essentially I am looking for a plugin "gulp-bowercopy" or something that provides this?
I still have a lot to learn about gulp/grunt and how to really leverage them, but this seems like an awesome tool to have.
essentially I am looking for a plugin "gulp-bowercopy" or something that provides this
You should then consider looking into either:
gulp-bower
or gulp-bower-files
as they likely provide the same functionality as grunt-bowercopy.
You can just use wiredep directly like the gulp Yeoman generator does. Here's a code sample from the gulpfile.js.
var wiredep = require('wiredep').stream;
gulp.task('wiredep', function () {
gulp.src('app/styles/*.scss')
.pipe(wiredep({
directory: 'app/bower_components',
ignorePath: 'app/bower_components/'
}))
.pipe(gulp.dest('app/styles'));
gulp.src('app/*.html')
.pipe(wiredep({
directory: 'app/bower_components',
ignorePath: 'app/'
}))
.pipe(gulp.dest('app'));
});