I made a gulp.js file that is meant to be observing my changes and rebuilding so that my react code can update after the scss gets converted to css with each change. Here's what I have:
'use strict';
//dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');
//////////////
// - SCSS/CSS
//////////////
var SCSS_SRC = './src/assets/scss/**/*.scss';
var SCSS_DEST = './src/assets/css';
// Compile SCSS
gulp.task('compile_scss', function(){
gulp.src(SCSS_SRC)
.pipe(sass().on('error', sass.logError))
.pipe(minifyCSS())
.pipe(rename({ suffix: '.min'}))
.pipe(changed(SCSS_DEST))
.pipe(gulp.dest(SCSS_DEST));
});
//detect changes in SCSS
gulp.task('watch_scss', function(){
gulp.watch(SCSS_SRC, gulp.series('compile_scss'));
});
//Run tasks
gulp.task('default', gulp.series(['watch_scss'], function(){
}));
This is the first time I do this but from what I can tell it is correct. There's no error being thrown and it works sometimes. However, when I make 2 changes to my default.scss file, the 1st one gets converted to css but for the second one I need kill the task and run gulp again. What might I be missing?
When i am executing my spec file(given below) ,I am getting the error message "RegistrationPO is not a constructor" ,Plz help me to solve my query.Thanks in advance.
//Registration_spec//
'use strict';
var FunLib = require('/Users/acer/AppData/Roaming/npm/node_modules/protractor/FFAutomation/Function_Lib.js'); //Write the location of your javascript file
var RegistrationPO = require('/Users/acer/AppData/Roaming/npm/node_modules/protractor/FFAutomation/Registration_PO.js'); //Write the location of your javascript file
var testData = require('./FFtestdata_Dev_p.json');
describe('Registration: ', function() {
var FuncLib;
var Registration;
var URL;
var EC = protractor.ExpectedConditions;
FuncLib = new FunLib();
Registration = new RegistrationPO();
beforeEach(function () {
browser.ignoreSynchronization = true;
});
//Scenario 1: Open browser :working
it('1-Open the web browser',function(){
browser.ignoreSynchronization = true;
browser.get('Http://dev.forfirm.com:3000');
browser.sleep(200000);
});
});
var FunLib = require('/Users/acer/AppData/Roaming/npm/node_modules/protractor/FFAutomation/Function_Lib.js'); //Write the location of your javascript file
var RegistrationPO = require('/Users/acer/AppData/Roaming/npm/node_modules/protractor/FFAutomation/Registration_PO.js'); //Write the location of your javascript file
Why do you trying to find your pageObjects in node_modules/protractor?
With this you will lose everything on every node_modules reinstall.
I believe this is the reason why you getting errors - you cant import, because file does not exist there
Create more plain structure, something like
node_modules/...all your dependencies will be installed here
utils/Function_Lib.js
pageobjects/Registration_PO.js
specs/registration.spec.js
package.json
protractor.config.js
Then your imports in specs/registration.spec.js will be something like this:
var FunLib = require('../utils/Function_Lib.js');
var RegistrationPO = require('../pageobjects/Registration_PO.js');
Also check what you are exporting in Registration_PO.js and Function_Lib.js
I'm developing a basic app made with Electron and AngularJS. For this purpose I'm using the electron boilerplate (https://github.com/szwacz/electron-boilerplate) and for database, I'm using LowDB(https://github.com/typicode/lowdb).
I have been able to create a database(JSON) and read it from a script. But my problem is when I want to update and save. I can update, and the change is reflected on the JSON file, but when I start the app again, the JSON has the same data that at the beginning (it is overwritten).
I think it is a problem with the build task of Electron boilerplate, that always overwrites the file. I thought that when I did the task to release the app, it will fixes(npm run release), but not, it overwrites the json.
I am loading the database so:
import low from 'lowdb';
import storage from 'lowdb/file-sync';
import {
remote
}
from 'electron';
var fs = require('fs');
var app = remote.require('app');
const db = low(__dirname + '/db.json', {
storage
});
document.addEventListener('DOMContentLoaded', function() {
db('users').push({
'name': 'foo'
});
});
This script is loaded at the beginning, so it should add, every time that app is started, a new entry. The script is writting the new entry in JSON file but when the start is restarted, the JSON back to the previous state.
At the end, I am using the localStorage, but I would like to use LowDB to save the data locally.
Here is the task (gulp file) that I commented before about the build of app:
'use strict';
var pathUtil = require('path');
var Q = require('q');
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var batch = require('gulp-batch');
var plumber = require('gulp-plumber');
var jetpack = require('fs-jetpack');
var bundle = require('./bundle');
var generateSpecImportsFile = require('./generate_spec_imports');
var utils = require('../utils');
var projectDir = jetpack;
var srcDir = projectDir.cwd('./app');
var destDir = projectDir.cwd('./build');
var paths = {
copyFromAppDir: [
'./node_modules/**',
'./bower_components/**',
'./components/**',
'./scripts/**',
'./shared.services/**',
'./sections/**',
'./helpers/**',
'./db.json',
'./**/*.html',
'./**/*.+(jpg|png|svg|eot|ttf|woff|woff2)'
],
}
// -------------------------------------
// Tasks
// -------------------------------------
gulp.task('sass', ['clean'], function() {
console.log('Compiling SASS...');
gulp.src('app/styles/scss/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(destDir.path('styles')));
});
gulp.task('watch:sass', function() {
console.log('Watching SASS...');
var sassWatcher = gulp.watch(['app/styles/scss/*.scss','app/**/**/*.scss'], ['sass']);
sassWatcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
gulp.src('app/styles/scss/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(destDir.path('styles')));
});
gulp.task('clean', function (callback) {
return destDir.dirAsync('.', { empty: true });
});
var copyTask = function () {
return projectDir.copyAsync('app', destDir.path(), {
overwrite: true,
matching: paths.copyFromAppDir
});
};
gulp.task('copy', ['clean'], copyTask);
gulp.task('copy-watch', copyTask);
var bundleApplication = function () {
return Q.all([
bundle(srcDir.path('background.js'), destDir.path('background.js')),
bundle(srcDir.path('app.js'), destDir.path('app.js')),
bundle(srcDir.path('script.js'), destDir.path('script.js')),
]);
};
var bundleSpecs = function () {
return generateSpecImportsFile().then(function (specEntryPointPath) {
return bundle(specEntryPointPath, destDir.path('spec.js'));
});
};
var bundleTask = function () {
if (utils.getEnvName() === 'test') {
return bundleSpecs();
}
return bundleApplication();
};
gulp.task('bundle', ['clean'], bundleTask);
gulp.task('bundle-watch', bundleTask);
gulp.task('finalize', ['clean'], function () {
var manifest = srcDir.read('package.json', 'json');
// Add "dev" or "test" suffix to name, so Electron will write all data
// like cookies and localStorage in separate places for each environment.
switch (utils.getEnvName()) {
case 'development':
manifest.name += '-dev';
manifest.productName += ' Dev';
break;
case 'test':
manifest.name += '-test';
manifest.productName += ' Test';
break;
}
// Copy environment variables to package.json file for easy use
// in the running application. This is not official way of doing
// things, but also isn't prohibited ;)
manifest.env = projectDir.read('config/env_' + utils.getEnvName() + '.json', 'json');
destDir.write('package.json', manifest);
});
gulp.task('watch', function () {
watch('app/**/*.js', batch(function (events, done) {
gulp.start('bundle-watch', done);
}));
watch(paths.copyFromAppDir, { cwd: 'app' }, batch(function (events, done) {
gulp.start('copy-watch', done);
}));
watch('app/**/scss/*.scss', batch(function (events, done) {
gulp.start('watch:sass', done);
}));
watch('app/**/**/*.scss', batch(function (events, done) {
gulp.start('watch:sass');
}));
});
gulp.task('build', ['bundle', 'sass', 'copy', 'finalize']);
How you can see, in 'copyFromAppDir' there is a db.json. This file is my database, but I want update it and changes persist, but I am not be able to do that.
Kind regards!
It looks like your gulp task 'clean' is overwriting your db.json file. Because you are using lowDB, this is the same as overwriting your database. If you remove the line './db.json', from the 'copyFromAppDir' array the changes should persist.
Like this:
var paths = {
copyFromAppDir: [
'./node_modules/**',
'./bower_components/**',
'./components/**',
'./scripts/**',
'./shared.services/**',
'./sections/**',
'./helpers/**',
'./**/*.html',
'./**/*.+(jpg|png|svg|eot|ttf|woff|woff2)'
],
}
I want to reference a "constant" that is defined outside this state function but if I try to pass it in as a provider it errors because constants are not providers. That is, I want to do something like:
var exports = module.exports = function ($stateProvider,configData) { ...
But that fails. How can I get my javascript variable baseDirectory passed in.
The bigger problem is that the webroot is not always at the same url. sometimes it is /ng and sometimes it is just / and I want to be able to set that as a config someplace I can load into a config file (not hard code into the state function.
var exports = module.exports = function ($stateProvider) {
$stateProvider.state('home', {
url: baseDirectory + '/home',
templateUrl: '/templates/home/home.html',
controller: 'HomeController',
});
};
exports.$inject = ['$stateProvider'];
I got the same issue, what I did, is to build a constant in the app, and replace them with new value in gulp task when the base url changed.
It had many apps, so my idea is dumb and simple, just find and replace the value of the content in the app by the new value input from gulp task configuration.
It's not smart, but works.
In the example, I have three apps in /clinic, /panel, /company, and for each of them, it had a build.js in it.
The build.js will build the app, and replace the constant value.
I have many apps, so I do this:
var gulp = require('gulp');
var concat = require('gulp-concat');
var taskBuildClinic = require("./clinic/build");
var taskBuildPanel = require("./panel/build");
var taskBuildCompany = require("./company/build");
var migrate = require("./laravel/migrate");
var env = {
'dev': {
EndpointBaseUrl: "'/admin/public/';",
TemplateBaseUrl: "'/admin/public';"
}
};
// ./node_modules/.bin/gulp
gulp.task('clinic', function (cb) {
return taskBuildClinic(gulp, env);
});
gulp.task('company', function (cb) {
return taskBuildCompany(gulp, env);
});
gulp.task('panel', function (cb) {
return taskBuildPanel(gulp, env);
});
In each build.js located in different app, it had:
var concat = require('gulp-concat');
var replace = require('gulp-replace');
...
if (env['production']) {
// replace something not for production
endpoint = "var EndpointBaseUrl = " + env['production']['EndpointBaseUrl'];
templateBaseUrl = "var TemplateBaseUrl = " + env['production']['TemplateBaseUrl'];
console.log(endpoint);
console.log(templateBaseUrl);
} else {
endpoint = "var EndpointBaseUrl = " + env['dev']['EndpointBaseUrl'];
templateBaseUrl = "var TemplateBaseUrl = " + env['dev']['TemplateBaseUrl'];
console.log(endpoint);
}
return gulp.src(files)
.pipe(concat(prefix + '.js'))
.pipe(replace(/var EndpointBaseUrl.*?;/g, endpoint))
.pipe(replace(/var TemplateBaseUrl.*?;/g, templateBaseUrl))
.pipe(gulp.dest('./build'));
In the app, I had:
var TemplateBaseUrl = "";
var EndpointBaseUrl = "";
Their content will be replaced by the value from gulp task.
I have a protractor instance that tests my app.
The following is my config for where the jasmine.JUnitXmlReporter should write the results file.
onPrepare: function () {
require('jasmine-reporters');
var capsPromise = browser.getCapabilities();
capsPromise.then(function (caps) {
var browserName = caps.caps_.browserName.toUpperCase();
var browserVersion = caps.caps_.version;
var prePendStr = browserName + '-' + browserVersion + '-';
jasmine.getEnv().addReporter(new jasmine.JUnitXmlReporter('test-results/protractor/', true, true, prePendStr));
});
},...
This presents a bit of an interesting challenge for git, because it won't track a folder unless there is a file in it. Which means that when my CI server is working on this, the file won't get written unless I put some other dummy file there.
I've played with the permissions on the folders, and that doesn't help. Is there something I'm doing wrong here? Running karma unit tests doesn't exhibit this same problem, e.g.:
junitReporter: {
outputFile: 'test-results/unit/results.xml',
suite: ''
},
This is how JUnitXmlReporter is made. You can see it's source code here.
You can use File System module here to make the folder needed before setting up the JUnitXmlReporter
var fs = require('fs')
fs.mkdirSync('unit');
fs.mkdirSync('unit/test-results');
jasmine.getEnv().addReporter(new jasmine.JUnitXmlReporter('test-results/protractor/'..
There is also a mkdirp module in NPM for avoiding errors when folder already is there.
My solution ended up being a combination of what #Mohsen suggest above and this SO question.
Instead of using synchronous file processing I opted to use Q to turn the mkdir calls into promises. Additionally, the capsPromise appends the browser version to the output file for extra information.
onPrepare: function () {
require('jasmine-reporters');
var fs = require('fs');
var Q = require('q');
var mkdir = Q.denodeify(fs.mkdir);
mkdir('test/test-results')
.then(function(data) {
mkdir('test/test-results/protractor')
.then(function(data) {
var capsPromise = browser.getCapabilities();
capsPromise.then(function (caps) {
var browserName = caps.caps_.browserName.toUpperCase();
var browserVersion = caps.caps_.version;
var prePendStr = browserName + '-' + browserVersion + '-';
jasmine.getEnv().addReporter(new jasmine.JUnitXmlReporter('test/test-results/protractor/', true, true, prePendStr));
});
})
.fail(function(err) {
console.err('Error creating directory ' + err);
})
})
.fail(function(err) {
console.err('Error creating directory ' + err);
});
},