I'm pretty new to teamcity and I'm having some difficulties understanding how to pass values to my gulp-config.js, which is used to setup the config to build and deploy a sitecore helix project with gulp msbuild.
I've created a new standard paramater in teamcity, called BuildConfiguration and in my guilpconfig I used it like :
var config = {
Configuration = %BuildConfiguration%,
...
}
Teamcity doesn't seem to be able to replace the variables inside the gulp file. What am I doing wrong?
Thanks a lot :)
Thanks a lot Amy and Chris.
I've used:
var parsedArgs = require("minimist")(process.argv.slice(2));
and in my gulpfile:
...
.pipe(msbuild({
targets: targets,
configuration: parsedArgs.buildConfiguration,
...
and in teamcity, in the advanced area of the gulp task:
--buildConfiguration %buildConfiguration% --otherArg %value%
Related
I have a gulp task which creates a JSON file from a YAML file and I want to use this JSON file in another task. But when I include this JSON file in the second task it says Error: Cannot find module './public/index.json'. I can see that the file is generated succesfully and if I run gulp for the second time it won't return any error. Why is this so and how can I correct it so that everything works fine in the first run?
Here's how the code looks like:
var yaml = require('gulp-yaml');
gulp.task('GenerateJSON', function() {
gulp.src("public/index.yaml")
.pipe(yaml())
.pipe(gulp.dest('public'))
});
gulp.task('GenerateIndex', function() {
var foo = require('./public/index.json');
...
});
And yes, I'm using run-sequence plugin, that's not helping either. Any help appreciated.
I think I figured out the issue. The GenerateJSON was not successfully terminating.
Adding, a return statement solved the issue.
I learn Yii2 and tried to use gulp with it in way like described here. I created gulp config with following content:
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var cssMin = require('gulp-css');
var rename = require('gulp-rename');
var minimist = require('minimist');
var options = minimist(process.argv.slice(2), {string: ['src', 'dist']});
var destDir = options.dist.substring(0, options.dist.lastIndexOf("/"));
var destFile = options.dist.replace(/^.*[\\\/]/, '');
// Use `compress-js` task for JavaScript files
gulp.task('compress-js', function () {
return gulp.src(options.src)
.pipe(uglify())
.pipe(rename(destFile))
.pipe(gulp.dest(destDir))
});
// Use `compress-css` task for CSS files
gulp.task('compress-css', function () {
return gulp.src(options.src)
.pipe(cssMin())
.pipe(rename(destFile))
.pipe(gulp.dest(destDir))
});
I use this file for my bundle:
<?php
namespace app\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/site.css',
];
public $js = [
];
public $jsOptions = [
'position' => \yii\web\View::POS_HEAD
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
And, after all, I use this config for asset command
<?php
Yii::setAlias('#webroot', str_replace('\\', '/', __DIR__) . '/web');
Yii::setAlias('#web', '/');
return [
'jsCompressor' => 'gulp compress-js --gulpfile gulpfile.js --src {from} --dist {to}',
'cssCompressor' => 'gulp compress-css --gulpfile gulpfile.js --src {from} --dist {to}',
'bundles' => [
'app\assets\AppAsset'
],
'targets' => [
'all' => [
'class' => 'yii\web\AssetBundle',
'basePath' => '#webroot/assets',
'baseUrl' => '#web/assets',
'js' => 'combined-{hash}.js',
'css' => 'combined-{hash}.css',
'depends' => [
],
],
],
// Asset manager configuration:
'assetManager' => [
'basePath' => '#webroot/assets',
'baseUrl' => '#web/assets',
'linkAssets' => true
],
];
But, when I try to run php yii asset assets-config.php config/assets-prod.php combined files and configuration file config/assets-prod.php generate, but in web/assets directory exists a lot of symlinks (or direct copies if linkAssets === true) of files and folders, which is bundle dependencies themselves. They generate via publish() method of AssetManager. Why Yii don't clean these folders and files after compilation process? Or maybe I do something wrong?
Your script or css files can depend on their sources. For instance you combine css files. One file (from folder "foldername" its important) have following rule
i.sprite-icons {
url(./icons.png)
}
yii concatenate files & move them into "/assests" folder. So Yii also modifies urls. As a result you have following css rule.
i.sprite-icons {
url(./foldername/icons.png)
}
Yii run compressor only after it concatenates files. In your case - gulp.
I am using ASP.NET Core MVC 6 using Visual Studio 2015. In my gulpfile.js script I want to know if the hosting environment is Development, Staging or Production so that I can add or remove source maps (.map files) and do other things. Is this possible?
UPDATE
Relevant issue on GitHub.
You can use the ASPNETCORE_ENVIRONMENT (Was formerly ASPNET_ENV in RC1) environment variable to get the environment. This can be done in your gulpfile using process.env.ASPNETCORE_ENVIRONMENT.
If the environment variable does not exist, you can fallback to reading the launchSettings.json file which Visual Studio uses to start your application. If that also does not exist, then fallback to using the Development environment.
I wrote the following JavaScript object to make dealing with the environment in gulpfile.js easier. You can find the full gulpfile.js source code here.
// Read the launchSettings.json file into the launch variable.
var launch = require('./Properties/launchSettings.json');
// Holds information about the hosting environment.
var environment = {
// The names of the different environments.
development: "Development",
staging: "Staging",
production: "Production",
// Gets the current hosting environment the application is running under.
current: function () {
return process.env.ASPNETCORE_ENVIRONMENT ||
(launch && launch.profiles['IIS Express'].environmentVariables.ASPNETCORE_ENVIRONMENT) ||
this.development;
},
// Are we running under the development environment.
isDevelopment: function () { return this.current() === this.development; },
// Are we running under the staging environment.
isStaging: function () { return this.current() === this.staging; },
// Are we running under the production environment.
isProduction: function () { return this.current() === this.production; }
};
See this answer for how to set the environment variable.
You would need to set the NODE_ENV environment variable in each environment and then in your gulpfile, read it in using process.env.NODE_ENV.
Have a look at https://stackoverflow.com/a/16979503/672859 for additional details.
I have a Gulp build process that runs through roughly 10 tasks, including browserify and watch. It currently builds a common-bundle.js, and common-libs.js. It uses browser-sync to give me sub-second rebuilds.
Now I want to also build a project that depends on the common project. I want to retain the live rebuilds of both common and this project so that I could work on both of them at the same time. I want to keep the build process itself as DRY as possible and reuse the tasks i created to build common.
For example, a sample task:
var config = require('../config');
gulp.task('styles', function () {
return gulp.src(config.styles.src) // if i could tell it to get config elsewhere...
...
I can't pass a parameter into each task to tell it, go run the task but use:
var config = require('../config').common;
vs.
var config = require('../config').projectA;
I don't think tasks can take parameters.
Is there a different way to structure this?
git/gist link would be highly appreciated.
For now I am trying this approach - each task js file has 2 tasks defined, but at least the logic of the task is reused. I still wish for something cleaner.
./gulp/task/style.js:
function styles(config){
return gulp.src(config.styles.src)
...
}
}
gulp.task('styles', function () {
styles(config.common);
});
gulp.task('stylesProject1', function () {
styles(config.project1);
});
devTask.js:
runSequence(['styles', 'stylesProject1], 'watch', callback);
Gulpfile.js
installed via npm install --save-dev gulp-load-plugins
var gulp = require('gulp');
// Require all tasks in gulp/tasks, including subfolders
require('require-dir')('./gulp/tasks', {
recurse: true
});
var $ = require('gulp-load-plugins')();
console.log($);
No matter where I declare it, the output will always be {}. I even tried with longer version having the options, still no luck
Using $.gulpif()
gives
TypeError: Object #<Object> has no method 'gulpif'
I even downloaded few starter packs from github but still getting same output. I'm kicking myself for moving from Grunt.
In the package.json, the plugin is saved as "gulp-if": "^1.2.5"
so, I had to change the code $.gulpif() to $.if() since the plugin will strip the names by below logic
var pattern = arrayify(options.pattern || ['gulp-*', 'gulp.*']);
var replaceString = options.replaceString || /^gulp(-|\.)/;
name.replace(replaceString, '');
A silly mistake which took 4 hours of my time.
P.S: I don't think it'll load any plugins without the prefix gulp in it's name.