Setting up PostCSS - plugins

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?

Related

gulp task with gulp-run-command doesn't work properly

I'm trying to run json-server in a gulp task and I'm checking if the server runs, with the function portInUse.
Like this:
var gulputil = require('gulp-util')
var run = require('gulp-run-command').default
var gulp = require('gulp')
const args = [
'json-server --watch .\\src\\main\\app\\reactjs\\api\\db.json --port 3005'
]
var net = require('net');
var portInUse = function(port, callback) {
var server = net.createServer(function(socket) {
socket.write('Echo server\r\n');
socket.pipe(socket);
});
server.listen(port, '127.0.0.1');
server.on('error', function (e) {
callback(true);
});
server.on('listening', function (e) {
server.close();
callback(false);
});
};
gulp.task("initLocalJsonServer", function() {
portInUse(3005, function(returnValue) {
gulputil.log('1 ' + returnValue);
});
run(args);
portInUse(3005, function(returnValue) {
gulputil.log('2 ' + returnValue);
});
});
That command that is the value of args here, works as intended when I run it in command line, so there's nothing wrong with the command or json-server itself. If I run it, I get to see the json-server at localhost:3005
Now the output from the portInUse function indicates that the server starts, as the output is:
[10:33:56] 1 false
[10:33:56] 2 true
But if I go to localhost:3005 after the gulp tasks are done, I can't see any server running. What might be the reason?

Protractor: commands in afterLaunch don't run

I'm trying to send an email out with results after tests have finished running.
When I put the sendgrid call in the onComplete section, then the email sends. However, the report is empty since it hasn't finished saving.
If I put the sendgrid call into the afterLaunch section, then the file is saved. However, it doesn't seem to run the sendgrid command.
This is the config that I am using:
var HtmlReporter = require ('protractor-jasmine2-html-reporter');
var browser = "chrome";
var environment = "dev";
var pname = "";
var pversion = "";
var dname = "";
var selenium_address = "http://localhost:4444/wd/hub";
var folder_name = (new Date()).toString().split(' ').splice(0,3).join('');
var report_folder = "./test/e2e/reports/" + folder_name + "_" + browser + "_" + environment + "/";
var reporter = new HtmlReporter({
savePath: report_folder,
takeScreenshots: false,
cleanDestination: true,
fileName: 'CE_Smoketest'
});
function test_function() {
var report = report_folder + 'CE_Smoketest.html'
var sendgrid = require('sendgrid')('xxxxx', 'xxxxxxxxx');
var email = new sendgrid.Email();
email.addTo("destination#mail.com");
email.setFrom("Smoketest#mail.com");
email.setSubject("Smoketest");
email.setHtml("Smoketest results");
email.addFile({filename: report});
sendgrid.send(email);
}
exports.config = {
//appium setup
seleniumAddress: selenium_address,
multiCapabilities: [
{
'browserName' : browser,
platformName : pname,
platformVersion : pversion,
deviceName: dname
}
],
getPageTimeout: 50000,
allScriptsTimeout: 50000,
jasmineNodeOpts: {
defaultTimeoutInterval: 50000,
isVerbose: true
},
onPrepare: function() {
jasmine.getEnv().addReporter(reporter);
},
onComplete: function(exitCode) {
test_function();
},
afterLaunch: function(exitCode) {
test_function();
}
}
Any ideas as to why afterLaunch doesn't send the email?
In afterLaunch methods, Webdriver instance have been shutdow(Not available). That's you code will get executed. Check description of afterLaunch() method below:
/**
* A callback function called once all tests have finished running and
* the WebDriver instance has been shut down. It is passed the exit
code
* (0 if the tests passed). afterLaunch must return a promise if you
want
* asynchronous code to be executed before the program exits.
* This is called only once before the program exits (after onCleanUp).
*/
Suresh is right, you must return a promise if you want asynchronous code to be executed before the program exits
Try this:
1- Declare new var
var q = require('q');
2- Refactor your afterLaunch
afterLaunch: function(exitCode) {
return q.fcall(function () {
test_function();
}).delay(1000);
}

Babelify breaks down

I have create a Gulpfile.js :
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
gulp.task('browserify', function(){
return browserify('./app/app.js')
.transform(babelify, { stage: 1})
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dest'));
});
i have app.js in the app folder and need to apply browserify task on it, the app.js contains this react class
var React = require('react');
var PropTypes = React.PropTypes;
var App = React.createClass({
render: function() {
return (
<div />
);
}
});
module.exports = App;
when i run this
gulp browserify
it gives me this error :
events.js:72
throw er; // Unhandled 'error' event
^
ReferenceError: [BABEL] E:\learn\react\RMD\public\assets\app\app.js: Using removed Babel 5 option: base.stage - Check ou
t the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets while parsing file: E:\learn\react\RMD\publi
c\assets\app\app.js
at Logger.error
Using removed Babel 5 option: base.stage
.transform(babelify, { stage: 1})
^^^^^

Why is gulp-rsync not deploying?

Im trying to deploy to a staging site with gulp-rsync. I'm not receiving any errors but it's not deploying to My server. I would also expect to be asked for the password, which is not happening.
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
plumber = require('gulp-plumber'),
bower = require('gulp-bower'),
sftp = require('gulp-sftp'),
rsync = require('gulp-rsync');
gulp.task('deploy', function() {
gulp.src('build/test_for_rsync')
.pipe(rsync({
root: 'build',
hostname: '*****.wpengine.com',
username: '*****',
port: 2222,
destination: '/wp-content/themes/',
incremental: true,
progress: true,
relative: true,
exclude: ['/node_modules', '/bower_components'],
recursive: true
}));
});
Try using return keyword before gulp.src:
gulp.task('deploy', function() {
return gulp.src('build/test_for_rsync')
.pipe(rsync({
root: 'build', ...

adding external plugin in CKEditor 3.6

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.