Trying to get gulp notify to work and tell me things are running and updating - npm

I am currently struggling to get gulp notify to display a success notification when I run my gulp watch command from terminal so that I know the command is running and the files have been compiled to the dist directory I have created.
I am very new to gulp and reading the docs on notify isn't 100% easy for me to understand or clear to me what I am doing wrong.
currently the code looks a bit like this...
var gulp = require('gulp'),
gutil = require('gulp-util'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
sourcemaps = require('gulp-sourcemaps'),
pump = require('pump'),
notify = require('gulp-notify'),
plumber = require('gulp-plumber'),
growl = require('growl'),
input = {
'sass': 'scss/**/*.scss',
'javascript': 'js/**/*.js'
},
output = {
'stylesheets': 'dist/styles',
'javascript': 'dist/javascript'
};
gulp.task('build-js', function() {
return gulp.src(input.javascript)
.pipe(sourcemaps.init())
.pipe(concat('test.js'))
//only uglify if gulp is ran with '--type production'
.pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
.pipe(sourcemaps.write())
.pipe(gulp.dest(output.javascript));
});
gulp.task('build-css', function() {
return gulp.src('scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest(output.stylesheets));
});
gulp.task('watch', function() {
notify("Watching for changes...").write('');
gulp.watch(input.javascript, ['jshint', 'build-js']);
gulp.watch(input.sass, ['build-css']);
.pipe(notify({
message: "Generated file: <%= file.relative %> # <%= options.date %>",
templateOptions: {
date: new Date()
}
}))
});

I've managed to get it working by changing the watch task to the following
gulp.task('watch', function() {
notify("Watching for changes...").write('');
gulp.watch(input.javascript, ['jshint', 'build-js']);
gulp.watch(input.sass, ['build-css']);
gulp.watch([
'dist/**/*'
]).on('change', function () {
notify("Files updated").write('');
});
});

Related

Video.js work with vue-electron for video playlist

I am work on autoplay video playlist. I use glob to get all video absolute path from a target folder. My code is below:
let vm = this;
let trailerList = null;
trailerList = glob.sync(`${__static}/trailers/*.{mp4,flv,mov}`).map(path => {
return {
sources: [{ src: path }]
};
});
let option = {
autoplay: true,
controls: false,
muted: true
};
this.player = videojs(this.$refs.videoPlayer, option, () => {
this.player.playlist(trailerList);
this.player.playlist.autoadvance(0);
this.player.playlist.repeat(true);
});
I got a ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported. It work if replace the variable path to require("C:/.../static/trailers/Video.mp4"). However, replace as require(path) will return module not found
Just downgrade electron version to 5 and problem solve

How do I integrate PostCSS into Broccoli angular-cli Build?

It seems like this build script is running but the CSS that is output is not minified or auto prefixed. I am attempting to compile SASS, then run the output through Post CSS with Broccoli and the angular-cli. I figure maybe some ember-cli folks could help as well. What am I doing wrong?
The build outputs this in terminal:
Slowest Trees | Total
----------------------------------------------+---------------------
BroccoliTypeScriptCompiler | 1274ms
vendor | 502ms
PostcssFilter | 465ms
but the CSS is the same as if it were output from SASS, not Post CSS.
Here is my angular-cli-build.js:
'use strict';
/* global require, module */
const Angular2App = require('angular-cli/lib/broccoli/angular2-app');
const compileSass = require('broccoli-sass');
const compileCSS = require('broccoli-postcss');
const cssnext = require('postcss-cssnext');
const cssnano = require('cssnano');
const mergeTrees = require('broccoli-merge-trees');
const Funnel = require('broccoli-funnel');
const _ = require('lodash');
const glob = require('glob');
var options = {
plugins: [
{
module: cssnext,
options: {
browsers: ['> 1%'],
warnForDuplicates: false
}
},
{
module: cssnano,
options: {
safe: true,
sourcemap: true
}
}
]
};
module.exports = function(defaults) {
let sourceDir = 'src';
let appTree = new Angular2App(defaults, {
sourceDir: sourceDir,
sassCompiler: {
includePaths: [
'src/style'
]
},
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/*.js',
'es6-shim/es6-shim.js',
'reflect-metadata/*.js',
'reflect-metadata/*.js.map',
'rxjs/**/*.js',
'#angular/**/*.js',
'rxjs/**/*.js.map',
'#angular/**/*.js.map',
'd3/d3.js',
'three/build/three.js',
'three/examples/js/postprocessing/*.js',
'three/examples/js/shaders/*.js'
]
});
let sass = mergeTrees(_.map(glob.sync('src/**/*.scss'), function(sassFile) {
sassFile = sassFile.replace('src/', '');
return compileSass(['src'], sassFile, sassFile.replace(/.scss$/, '.css'));
}));
let css = compileCSS(sass, options);
return mergeTrees([sass, css, appTree], { overwrite: true });
};
It was the order of operations, my trees were not overwriting appTree!
This works!
return mergeTrees([appTree, sass, css], { overwrite: true });

less-plugin-autoprefix plugin with Gulp showing error

The less-plugin-autoprefixer plugin README says that, to use the plugin, you include this in your gulpfile.js:
var LessPluginAutoPrefix = require('less-plugin-autoprefix'),
autoprefixPlugin = new LessPluginAutoPrefix({browsers: ["last 2 versions"]});
less.render(lessString, { plugins: [autoprefixPlugin] })
.then(
Do they want me to put an open ended callback function here? I'm confused. I tried including just the first part:
var LessPluginAutoPrefix = require('less-plugin-autoprefix'),
autoprefixPlugin = new LessPluginAutoPrefix({browsers: ["last 2 versions"]});
and then called the plugin like this:
gulp.task('less', ['clean'], function() {
return gulp.src('app.less')
.pipe(less({
includePaths: ['less'],
plugins: [autoprefixPlugin] //***//
}))
.pipe(cssmin({keepSpecialComments: 0}))
.pipe(rename('app.full.min.css'))
.pipe(gulp.dest('../server/dist/'))
.pipe(filter('../server/dist/**/*.css'))
.pipe(reload({stream:true}));
});
But I receive the following error:
TypeError: Object #<Autoprefixer> has no method 'on'
at DestroyableTransform.Stream.pipe (stream.js:65:8)
at Gulp.<anonymous> (/Users/himmel/Sites/matt-mcdaniel.com/client/gulpfile.js:131:10)
I've included the necessary dependency, autoprefixer-core, what am I missing here?
The error was thrown for an unknown reason due to inclusion of:
var autoprefixer = require('autoprefixer-core');
After removing this, no error was thrown.
Additionally, including:
var LessPluginAutoPrefix = require('less-plugin-autoprefix'),
autoprefixPlugin = new LessPluginAutoPrefix({browsers: ["last 2 versions"]});
and
gulp.task('less', ['clean'], function() {
return gulp.src('app.less')
.pipe(less({
includePaths: ['less'],
plugins: [autoprefixPlugin] //***//
}))
.pipe(cssmin({keepSpecialComments: 0}))
.pipe(rename('app.full.min.css'))
.pipe(gulp.dest('../server/dist/'))
.pipe(filter('../server/dist/**/*.css'))
.pipe(reload({stream:true}));
});
was sufficient for my gulpfile to autoprefix on build, but did not autoprefix via BrowserSync during development.

How to test AngularJS Directive with scrolling

I have an infinite scroll directive that I am trying to unit test. Currently I have this:
describe('Infinite Scroll', function(){
var $compile, $scope;
beforeEach(module('nag.infiniteScroll'));
beforeEach(inject(function($injector) {
$scope = $injector.get('$rootScope');
$compile = $injector.get('$compile');
$scope.scrolled = false;
$scope.test = function() {
$scope.scrolled = true;
};
}));
var setupElement = function(scope) {
var element = $compile('<div><div id="test" style="height:50px; width: 50px;overflow: auto" nag-infinite-scroll="test()">a<br><br><br>c<br><br><br><br>e<br><br>v<br><br>f<br><br>g<br><br>m<br>f<br><br>y<br></div></div>')(scope);
scope.$digest();
return element;
}
it('should have proper initial structure', function() {
var element = setupElement($scope);
element.find('#test').scrollTop(10000);
expect($scope.scrolled).toBe(true);
});
});
However the .scrollTop(10000); does not seem to trigger anything.
Is there anyway to unit test this type of functionality (I am able to unit test other directives with similar interactions like clicking on elements)?
In case it is relative, this is the infinite scroll code:
angular.module('nag.infiniteScroll', [])
.directive('nagInfiniteScroll', [
function() {
return function(scope, elm, attr) {
var raw = elm[0];
elm.bind('scroll', function() {
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
scope.$apply(attr.nagInfiniteScroll);
}
});
};
}
]);
You have to trigger the scroll event on your element manually in your test:
element.find('#test').scrollTop(10000);
element.find('#test').triggerHandler('scroll');
Had the same issue recently. For the scrolling to work, you will need to set some dimensions on the body tag, so the window can be scrolled.
var scrollEvent = document.createEvent( 'CustomEvent' ); // MUST be 'CustomEvent'
scrollEvent.initCustomEvent( 'scroll', false, false, null );
var expectedLeft = 123;
var expectedTop = 456;
mockWindow.document.body.style.minHeight = '9000px';
mockWindow.document.body.style.minWidth = '9000px';
mockWindow.scrollTo( expectedLeft, expectedTop );
mockWindow.dispatchEvent( scrollEvent );
Unfortunately this does not work in PhantomJS.
If you are running your tests on Travis CI, you can also use Chrome by adding the following to your .travis.yml
before_install:
- export CHROME_BIN=chromium-browser
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
And a custom Chrome launcher in your karma config:
module.exports = function(config) {
var configuration = {
// ... your default content
// This is the new content for your travis-ci configuration test
// Custom launcher for Travis-CI
customLaunchers: {
Chrome_travis_ci: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: true
};
if(process.env.TRAVIS){
configuration.browsers = ['Chrome_travis_ci'];
}
config.set( configuration );
};

Can I use Ext's loader to load non-ext scripts/object dynamically?

In my ExtJS 4.0.7 app I have some 3rd party javascripts that I need to dynamically load to render certain panel contents (some fancy charting/visualization widgets).
I run in to the age-old problem that the script doesn't finish loading before I try to use it. I thought ExtJS might have an elegant solution for this (much like the class loader: Ext.Loader).
I've looked at both Ext.Loader and Ext.ComponentLoader, but neither seem to provide what I'm looking for. Do I have to just "roll my own" and setup a timer to wait for a marker variable to exist?
Here's an example of how it's done in ExtJS 4.1.x:
Ext.Loader.loadScript({
url: '...', // URL of script
scope: this, // scope of callbacks
onLoad: function() { // callback fn when script is loaded
// ...
},
onError: function() { // callback fn if load fails
// ...
}
});
I've looked at both Ext.Loader and Ext.ComponentLoader, but neither
seem to provide what I'm looking for
Really looks like it's true. The only thing that can help you here, I think, is Loader's injectScriptElement method (which, however, is private):
var onError = function() {
// run this code on error
};
var onLoad = function() {
// run this code when script is loaded
};
Ext.Loader.injectScriptElement('/path/to/file.js', onLoad, onError);
Seems like this method would do what you want (here is example). But the only problem is that , ... you know, the method is marked as private.
This is exactly what newest Ext.Loader.loadScript from Ext.4-1 can be used for.
See http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Loader-method-loadScript
For all you googlers out there, I ended up rolling my own by borrowing some Ext code:
var injectScriptElement = function(id, url, onLoad, onError, scope) {
var script = document.createElement('script'),
documentHead = typeof document !== 'undefined' && (document.head || document.getElementsByTagName('head')[0]),
cleanupScriptElement = function(script) {
script.id = id;
script.onload = null;
script.onreadystatechange = null;
script.onerror = null;
return this;
},
onLoadFn = function() {
cleanupScriptElement(script);
onLoad.call(scope);
},
onErrorFn = function() {
cleanupScriptElement(script);
onError.call(scope);
};
// if the script is already loaded, don't load it again
if (document.getElementById(id) !== null) {
onLoadFn();
return;
}
script.type = 'text/javascript';
script.src = url;
script.onload = onLoadFn;
script.onerror = onErrorFn;
script.onreadystatechange = function() {
if (this.readyState === 'loaded' || this.readyState === 'complete') {
onLoadFn();
}
};
documentHead.appendChild(script);
return script;
}
var error = function() {
console.log('error occurred');
}
var init = function() {
console.log('should not get run till the script is fully loaded');
}
injectScriptElement('myScriptElem', 'http://www.example.com/script.js', init, error, this);
From looking at the source it seems to me that you could do it in a bit of a hackish way. Try using Ext.Loader.setPath() to map a bogus namespace to your third party javascript files, and then use Ext.Loader.require() to try to load them. It doesn't look like ExtJS actually checks if required class is defined in the file included.