In VS 2019 when I try to Publish to a folder Gulp fails with ReferenceError: merge is not defined.
gulpfile.js
/// <binding AfterBuild='default' />
var gulp = require('gulp');
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
gulp.task('minify', function () {
return gulp.src("wwwroot/js/**/*.js")
.pipe(uglify())
.pipe(concat("dutchtreat.min.js"))
.pipe(gulp.dest("wwwroot/dist"));
});
var nodeModules = {
"bootstrap": { "dist/**/*": "" },
"font-awesome": { "**/*": "" },
"jquery": { "dist/*": "" },
"jquery-validation": { "dist/*": "" },
"jquery-validation-unobstrusive": { "dist/*": "" } };
gulp.task("node_modules", function () {
let streams = [];
for (var module in nodeModules) {
console.log("Prepping Scripts for: " + module);
for (var itemProp in nodeModules[module]) {
streams.push(gulp.src("node_modules/" + module + "/" + itemProp)
.pipe(gulp.dest("wwwroot/lib" + module + "/" + nodeModules[module][itemProp])));
}
}
return merge(streams);
});
gulp.task('default', gulp.series("node_modules", "minify"));
package.json "devDependencies"
"gulp": "4.0.2",
"gulp-uglify": "3.0.2",
"gulp-concat": "2.6.1",
"merge-stream": "2.0.0",
"merge": "1.2.1"
All 5 files are loaded in the Dependencies | npm folder.
Why can it not find merge? Is this syntax correct for Gulp 4?
You need to require merge to use it like you have with everything else.
var merge = require(“merge-stream”);
I think I usually use gulp-merge but I believe merge-stream will work just as well.
Related
I am trying to read json file inside "index.html" file of the project, since for azure devops extension we already have require.js library, hence wanted to use the same capability of it to import "config.json" file inside "index.html" file.
basic file structure:
|-index.html
|-static |-icon.png
| |-config.json
|-vss-extension.json
my index.html file look somewhat like this :
init block
VSS.init({
explicitNotifyLoaded: true,
usePlatformScripts: true,
setupModuleLoader: true,
moduleLoaderConfig: {
paths: {
"Static": "static"
}
}
});
require block
VSS.require(
["TFS/WorkItemTracking/Services", "Static/config"],
function (_WorkItemServices, ConfigJson) {
VSS.ready(function(){
VSS.register(VSS.getContribution().id, function () {
return {
// Called when the active work item is modified
onFieldChanged: function (args) {
console.log(
"inside onfield : " +
JSON.stringify(ConfigJson)
);
}
....
};
});
VSS.notifyLoadSucceeded();
})
});
My vss-extension.json file :
File block
"files": [
{
"path": "static/config.json",
"addressable": true,
"contentType": "application/json"
},
....
]
I am always getting require.js Script error: https://requirejs.org/docs/errors.html#scripterror
Took reference from:
https://github.com/ALM-Rangers/Show-Area-Path-Dependencies-Extension/blob/master/src/VSTS.DependencyTracker/vss-extension.json for vss-extension file.
https://github.com/ALM-Rangers/Show-Area-Path-Dependencies-Extension/blob/master/src/VSTS.DependencyTracker/index.html for index.html
I am afraid that you couldn't directly get the content of the json file.
But you could try to use the HTTP request to get the content.
Please refer to the following sample:
onFieldChanged: function (args) {
var request = new XMLHttpRequest();
request.open('GET', 'config.json', true);
request.send(null);
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
var type = request.getResponseHeader('Content-Type');
console.log( "inside onfield : " + JSON.stringify(request.responseText));
}
}
Check out these two tickets for details.
Loading a JSON file in a VSTS extension
read local JSON file into variable
Is VSS using unmodified RequireJS? If yes, then you can use JSON plugin, which will help:
https://github.com/millermedeiros/requirejs-plugins
Using it is pretty simple, you just have to add a prefix json! when specifying a json file as a dependency:
VSS.require(
["TFS/WorkItemTracking/Services", "json!Static/config"],
function (_WorkItemServices, ConfigJson) {
VSS.ready(function(){
VSS.register(VSS.getContribution().id, function () {
return {
// Called when the active work item is modified
onFieldChanged: function (args) {
console.log(
"inside onfield : " +
JSON.stringify(ConfigJson)
);
}
....
};
});
VSS.notifyLoadSucceeded();
})
});
For data driven run I want to dynamically create required number of spec files in Conf file. For below code I get TS2304: Cannot find name 'buildspecs'
buildSpecs: function buildSpecs()
{
let specsToBeRun;
for (var i=0; i<3; i++) {
specsToBeRun = 'MySpec' + i + '.js'
}
specsToBeRun = '[' + specsToBeRun + ']'
return specsToBeRun
},
exports.config = {
specs: buildSpecs(),
},
From your given code, I guess you define buildSpecs() is another js file, not in protracor conf.js. I will give a example for such case.
// buildSpecs.js
module.exports = {
buildSpecs: function()
{
let specsToBeRun;
for (var i=0; i<3; i++) {
specsToBeRun = 'MySpec' + i + '.js'
}
specsToBeRun = '[' + specsToBeRun + ']'
return specsToBeRun
},
};
// protractor conf.js
var buildSpecs = require('buildSpecs.js').buildSpecs;
exports.config = {
specs: buildSpecs(),
};
If you define buildSpecs() in protractor conf.js, please update your question to show the entire conf.js.
Please help. I am new to testing with karma. When I run "karma start karma.local.conf.js" the Chrome browser window comes up but the test doesn't run. I think my app.js and my test.js are ok and I suspect that the issue is incorrect versions of the packages I'm loading in my package.json. I know I also need to include mocha and chai:
{
"devDependencies": {
"browserify": "10.2.3",
"gulp": "3.8.11",
"gulp-browserify": "0.5.1",
"karma": "0.12.16",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "0.1.4",
"karma-mocha": "0.1.4",
"http-status": "0.1.8",
"underscore": "1.5.2"
}
}
Here is my karma.local.conf.js file:
module.exports = function(config) {
config.set({
files: [
'http://code.jquery.com/jquery-1.11.3.js',
'https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js',
// For ngMockE2E
'https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-mocks.js',
'./app.js',
'./test.js'
],
frameworks: ['mocha', 'chai'],
browsers: ['Chrome'],
proxies : {
'/': 'http://localhost:3000'
}
});
};
I can also post the app.js and the test.js if need be, but I think they are ok. I think the issue is in the package.json and getting the right versions of the npm packages I need.
Here is my app.js:
var app = angular.module('myApp', ['ng']);
app.directive('userMenu', function() {
return {
controller: 'MyHttpController',
template: '<div class="user" ng-show="user">' +
' Current User: {{user.profile.username}}' +
'</div>' +
'<div ng-show="!user">' +
' <a href="/auth/facebook">' +
' Log In' +
' </a>' +
'</div>'
}
});
app.controller('MyHttpController', function($scope, $http) {
$http.get('/api/v1/me').success(function(data) {
$scope.user = data.user;
});
});
Here is my test.js:
describe('Nav Bar', function() {
var injector;
var element;
var scope;
var compiler;
var httpBackend;
beforeEach(function() {
injector = angular.injector(['myApp', 'ngMockE2E']);
intercepts = {};
injector.invoke(function($rootScope, $compile, $httpBackend) {
scope = $rootScope.$new();
compiler = $compile;
httpBackend = $httpBackend;
});
});
it('shows logged in users name', function(done) {
httpBackend.expectGET('/api/v1/me').respond({
user: { profile: { username: 'John' } }
});
element = compiler('<user-menu></user-menu>')(scope);
scope.$apply();
httpBackend.flush();
assert.notEqual(element.find('.user').css('display'), 'none');
assert.equal(element.find('.user').text().trim(), 'Current User: John');
done();
});
});
Thanks in advance,
William
Here is what I did to get my tests to run:
1. Run "npm install <package name> without a version number for each package in my package.json file
2. Run "karma init" to create a new config file. By default this command creates karma.conf.js
3. Modify karma.conf.js with the information from karma.local.conf.js
4. Run "karma start". By default this command looks for a file named karma.conf.js (I had already run "npm install -g karma-cli" so I was able to run "karma start" without specifying a path
5. Next I will run "npm ls" to see what package versions were installed and create a new version of package.json for future projects.
Another solution might be to run "npm install" and then run "ncu -u" to update all the packages to the latest versions. That might work but I haven't tested it.
I am just trying to set up PostCSS and integrate it into my recent workflow. But somehow I don't seem to get it work.
I am using A Mac and gulp as a task runner.
This is the erro I get when starting my watch task:
TypeError: $.postcss is not a function
And this is what my gulpfile.js looks like:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')({
rename: {
'browser-sync': 'browserSync',
'gulp-postcss': 'postcss',
},
pattern: ['gulp-*', 'gulp.*', 'del', 'run-sequence', 'browser-sync'],
DEBUG: false
});
var targetPath = 'dist';
var useBrowserSync = $.util.env.browserSync || true;
gulp.task('sass', function(){
return gulp.src('src/scss/*.{scss,sass,css}')
.pipe($.postcss([
require('precss')()
], {syntax: require('postcss-scss')}))
.pipe(gulp.dest(targetPath + '/public/assets/css'))
.pipe( $.if( useBrowserSync , $.browserSync.stream() ) );
});
gulp.task('watch', ['sass'], function(){
if( useBrowserSync ){
$.browserSync.create();
$.browserSync.init({
proxy: 'localhost/my_project/dist/public/'
});
}
gulp.watch('src/scss/*.{scss,sass,css}', ['sass']);
});
What is going wrong?
I am trying to add an external plugin in ckeditor but it looks that I am not registering correctly my plugin and it isn' showing.
1.- I tried adding it directly to the CKEditor config file and it didn't work.
CKEDITOR.editorConfig = function(config) {
config.toolbar = [
['Bold'],['Italic'],['myplugin']
]
};
2.- Tried adding it to the html file when initiating CKEditor and also didn't work.
var editor = CKEDITOR.replace( 'editor1',
{
removePlugins : 'forms,table,tabletools',
extraPlugins : 'msugetprop,msuforms,msutable,msutabletools,msumobile',
toolbar :
[
['Cut','Copy','PasteText','Preview'],
['Undo','Redo','-','SelectAll'],
['MsuForm','MsuGetProp','MsuCheckbox', 'MsuRadio', 'MsuTextField', 'MsuTextarea', 'MsuSelect', 'MsuButton', 'MsuTable', 'MsuHiddenField'],
'/',
['Styles','-','NumberedList','BulletedList','-','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Source','-','About'],
['myplugin'],
]
});
3.- My plugin is under /ckeditor/plugins/myplugin with filename plugin.js
(function() {
var o = { exec: function(p) {
url = baseUrl + "/GetSomeData";
$.post(url, function(response) {
alert(response)
});
}
};
CKEDITOR.plugins.add('myplugin', {
init: function(editor) {
editor.addCommand('myplugin', o);
editor.ui.addButton('myplugin', {
label: 'myplugin',
icon: this.path + 'myplugin.png',
command: 'myplugin'
});
}
});
})();
What am I missing ?
Solved.
forgot to add 'myplugin" under extraPlugins.