I am using gulp with autoprefixer in my project, and I have to use backgrounds gradient like this:
background: linear-gradient(#e98a00, #f5aa2f);
but output is:
background:-webkit-linear-gradient(#e98a00,#f5aa2f);
background:linear-gradient(#e98a00,#f5aa2f);
What wrong with me?
Part of Gulpfile.js
gulp.task('styles', function() {
return gulp.src(['css/less/mainPage.less'])
.pipe(plumber())
// .pipe(concat('base.scss'))
.pipe(less())
.pipe(prefix([{ browsers: ['IE 8', 'IE 9', 'last 5 versions', 'Firefox 14', 'Opera 11.1'] }]))
.pipe(minifyCSS({keepBreaks: true}))
.pipe(gulp.dest('css'))
.pipe(connect.reload());
});
Iam using gulp-autoprefixer
even if Iam setting
browsers: ['Firefox 14']
output still:
background:-webkit-linear-gradient(#e98a00,#f5aa2f);
background:linear-gradient(#e98a00,#f5aa2f);
Use "autoprefixer-core" with "gulp-postcss". Usage example :
var MASK_SRC = "./src/mask/page0/";
var gulp = require("gulp")
var plumber = require("gulp-plumber")
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer-core');
var csso = require("gulp-csso")
gulp.task("styles", function() {
return gulp.src(MASK_SRC + "scss/*.css")
//.pipe(plumber())
.pipe(postcss([ autoprefixer({ browsers: ["> 0%"] }) ]))
//.pipe(csso())
.pipe(gulp.dest(MASK_SRC + "/css/"))
})
gulp.task("dev", ["styles"], function() {
gulp.watch(MASK_SRC + "scss/**/*", function(event) {
gulp.run("styles")
})
})
If you check http://caniuse.com/#search=linear-gradient, you will see that Firefox since at least version 30 do not require the moz- prefix. Version version 30 has a global market share of < 1% and you have set '> 1%'
There is a bug with gulp-autprefixer.No way to add "-moz-" prefix.
Autoprefixer standalone works well: http://jsfiddle.net/tsvppawk/
The same query "Firefox >= 2" in gulp-atuprefixer generates:
background: -webkit-linear-gradient(#e98a00, #f5aa2f);
background: linear-gradient(#e98a00, #f5aa2f);
Related
I'm banging my head with what should be a simple fix to a gulpfile that would allow it to build scss files.
I have the following structure in my angular2 project:
|-rootDir
|-- app
|--- <bunch of stuff in the app dir>
|-- resources
|--- scss
|---- <scss files>
However, whenever I run gulp createI get an error stating Error: Invalid glob argument: undefined
What am I doing wrong here???
This is my gulpfile:
var gulp = require('gulp'),
sass = require('gulp-sass'),
minifycss = require('gulp-minify-css'),
autoprefixer = require('gulp-autoprefixer'),
concat = require('gulp-concat'),
debug = require('gulp-debug'),
del = require('del'),
insert = require('gulp-insert'),
fs = require("fs");
/* Tasks Functions */
sass = function(files, dest) {
pipe_files = gulp.src(files);
return pipe_files
.pipe(debug())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(minifycss())
.pipe(gulp.dest(dest));
}
/* CSS Tasks */
gulp.task( 'styles', function() { sass( ['./resources/scss/*.scss'], './resources/css_gulp/') });
gulp.task('clean', function(cb) {
del(['./resources/css_gulp/*.*'], cb)
});
gulp.task( 'create', function() {
gulp.start('styles');
});
gulp.task('default', ['clean'], function() {
gulp.start('create');
});
So, where am I going wrong on the paths?
* EDIT *
I've added gulp-debug and this is the output:
[20:03:40] Finished 'create' after 17 ms
[20:03:40] gulp-debug: resources/scss/main.scss
[20:03:40] gulp-debug: resources/scss/prime-overrides.scss
[20:03:40] gulp-debug: 2 items
Everything seems correct here. So why the error?
As pointed out by Sven in comment. The issue seems to be caused due to defining the task function "sass".
Changing the function name would solve it.
I have seen similar errors with src() function before especially when mainBowerFiles dependency is loaded but not called properly in gulp.src()
It would be easier to identify such issues if as a principle we write the entire callbacks separately and also ensuring that String or Array of glob getting passed.
gulp.task('myTask', myTaskCallback);
// myTaskCallback implementation
function myTaskCallback() {
return gulp.src() // ensure Glob or array of globs to read.
.pipe()......
}
More can be found in the gulp documentation.
https://github.com/gulpjs/gulp/blob/v3.9.1/docs/API.md
I'm using gulp with browserify and tsify. This has been working quite well. Then I decided to add ng-annotate using browserify-ngannotate.
I've added the ng-annotate browserify transform but it seems that if tsify is added as a plugin the ng-annotate transform is never called.
If I remove the tsify plugin then ng-annote gets called. I've played around and switched around the plugin/transform registration. Am I missing something here, or should I go and log an issue at browserify/tsify?
var browserify = require('browserify');
var browserSyncConfig = require('../config').browserSync;
var browserSync = require('browser-sync').get(browserSyncConfig.instance);
var watchify = require('watchify');
var tsify = require('tsify');
var ngAnnotate = require('browserify-ngannotate');
var mergeStream = require('merge-stream');
var bundleLogger = require('../util/bundleLogger');
var gulp = require('gulp');
var handleErrors = require('../util/handleErrors');
var source = require('vinyl-source-stream');
var config = require('../config').browserify;
var _ = require('lodash');
var browserifyTask = function (devMode) {
var browserifyThis = function (bundleConfig) {
if (devMode) {
// Add watchify args and debug (sourcemaps) option
_.extend(bundleConfig, watchify.args, {debug: true});
// A watchify require/external bug that prevents proper recompiling,
// so (for now) we'll ignore these options during development. Running
// `gulp browserify` directly will properly require and externalize.
bundleConfig = _.omit(bundleConfig, ['external', 'require']);
}
var b = browserify(bundleConfig);
if (bundleConfig.tsify) {
b = b.plugin(tsify, {
noImplicitAny: false,
target: 'ES5',
noExternalResolve: false,
module: 'commonjs',
removeComments: false
});
}
if (bundleConfig.ngAnnotate) {
b = b.transform(ngAnnotate);
}
var bundle = function () {
// Log when bundling starts
bundleLogger.start(bundleConfig.outputName);
return b
.bundle()
// Report compile errors
.on('error', handleErrors)
// Use vinyl-source-stream to make the
// stream gulp compatible. Specify the
// desired output filename here.
.pipe(source(bundleConfig.outputName))
// Specify the output destination
.pipe(gulp.dest(bundleConfig.dest))
.pipe(browserSync.stream());
};
if (devMode) {
// Wrap with watchify and rebundle on changes
b = watchify(b, {
poll: true
});
// Rebundle on update
b.on('update', bundle);
bundleLogger.watch(bundleConfig.outputName);
} else {
// Sort out shared dependencies.
// b.require exposes modules externally
if (bundleConfig.require) b.require(bundleConfig.require);
// b.external excludes modules from the bundle, and expects
// they'll be available externally
if (bundleConfig.external) b.external(bundleConfig.external);
}
return bundle();
};
// Start bundling with Browserify for each bundleConfig specified
return mergeStream.apply(gulp, _.map(config.bundleConfigs, browserifyThis));
};
gulp.task('browserify', function () {
return browserifyTask()
});
// Exporting the task so we can call it directly in our watch task, with the 'devMode' option
module.exports = browserifyTask;
You can solve it by specify extensions in ng-annotate options.
bundler.transform(ngAnnotate, { ext: ['.ts', '.js'] });
I realized I had this problem too, when I added uglifyify to the bundle transforms to produce minified builds.
An important aspect of my solution is that the missing, explicit $inject statements, that ng-annotate should have inserted, doesn't matter until the code is actually minified. Luckily, UglifyJS2, which does the actual minification in uglifyify, got support for handling ng-annotate's ngInject comments in version 2.4.9 (in January, 2014).
So, the solution that worked for me was to install uglifyify:
npm install --save-dev uglifyify
and add the following uglifyify transform to the Browserify bundle:
b.transform({
global: true,
mangle: false,
comments: true,
compress: {
angular: true
}
}, 'uglifyify');
This will make UglifyJS2 insert the appropriate $inject statements into your code before it is minified.
So, to summarize, I did not have a solution for only using ng-annotate, but my solution will add the necessary $inject statements before the code is minified, which is what matters in most cases.
I'm using gulp-sass and I get the following errors:
ESL#eslmbp /Applications/MAMP/htdocs/craigpomranz[master*]$ gulp sass
[17:54:53] Using gulpfile /Applications/MAMP/htdocs/craigpomranz/gulpfile.js
[17:54:53] Starting 'sass'...
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error in plugin 'gulp-sass'
/Applications/MAMP/htdocs/craigpomranz/wp-content/themes/craig/scss/partials/base:13: error: error reading values after 'xsmall'
at opts.error (/Applications/MAMP/htdocs/craigpomranz/node_modules/gulp-sass/index.js:67:17)
at onError (/Applications/MAMP/htdocs/craigpomranz/node_modules/gulp-sass/node_modules/node-sass/sass.js:73:16)
Here's my gulpfile.js:
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
//var sass = require('gulp-ruby-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var minify = require('gulp-minify-css');
var browserSync = require('browser-sync');
var rename = require('gulp-rename');
var theme_path = 'wp-content/themes/craig/';
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src(theme_path+'scss/main.scss')
.pipe(sass())
// .pipe(minify({keepBreaks:true}))
.pipe(minify())
//.pipe(rename('style.css'))
.pipe(gulp.dest(theme_path));
});
The same scss (files) compile fine with: sass --watch path/to/main.scss --compressed
I tried with another plugin (gulp-ruby-sass) and it threw a different error.
What am I doing wrong?
Update The error message mentions line 13 in _base.scss. Here is the contents of that file:
//Setting breakpoints
$xsmall : 400px;
$small : 768px; //phones
$medium : 1024px; //tablets
$breakpoints: (
'xsmall' :'(max-width: #{$xsmall})', //<--HERE IS LINE 13
'small': '(max-width: #{$small})',
// 'small': '(min-width: #{$xsmall+1}) and (max-width: #{$small})',
'medium': '(min-width: #{$small+1}) and (max-width: #{$medium})',
'large': '(min-width: #{$medium + 1})'
);
gulp-sass doesn't support maps, try using your commented out gulp-ruby-sass.
What will be supported is lists:
$breakpoint-keys: (
'key_a',
'key_b',
'key_c'
);
$breakpoint-values: (
'value_a',
'value_b',
'value_c'
);
But as you'll see, these are one-dimensional. However maps (new in SASS 3.3.0, 7 March 2014) will allow you to use keys which will let you use the syntax you are currently using:
$breakpoints: (
'key_a' : 'value_a',
'key_b' : 'value_b',
'key_c' : 'value_c'
);
For more information about lists and maps, refer to this article: http://viget.com/extend/sass-maps-are-awesome
I have Gulpfile with jshint configured to use jshint-stylish reporter. I need to pass option verbose to reporter in order to display warning codes. Is it possible to do it using Gulp?
Current my gulpfile.js looks like below:
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var compass = require('gulp-compass');
var path = require('path');
require('shelljs/global');
var jsFiles = ['www/js/**/*.js', '!www/js/libraries/**/*.js', 'www/spec/**/*.js', '!www/spec/lib/**/*.js'];
var sassFiles = 'www/sass/*.scss';
gulp.task('lint', function () {
return gulp
.src(jsFiles)
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
});
gulp.task('compass', function () {
gulp.src(sassFiles)
.pipe(compass({
project: path.join(__dirname, 'www'),
css: 'css',
sass: 'sass',
image: 'img',
font: 'fonts'
})).on('error', function() {});
});
var phonegapBuild = function (platform) {
if (!which('phonegap')) {
console.log('phonegap command not found')
return 1;
}
exec('phonegap local build ' + platform);
};
gulp.task('build:android', ['lint', 'compass'], function () {
phonegapBuild('android');
});
gulp.task('build:ios', ['lint', 'compass'], function () {
phonegapBuild('ios');
});
gulp.task('watch', function() {
gulp.watch(jsFiles, ['lint']);
gulp.watch(sassFiles, ['compass']);
});
gulp.task('default', ['lint', 'compass']);
Well, this, plus the fact that the output of the stylish reporter is hardly readable on Windows due to the darkness of the blue text, so I have to keep going in an manually changing the colour after installing it, has made me do something about it. So you should hopefully have more luck with this reporter I've just written:
https://github.com/spiralx/jshint-summary
You basically use it like this;
var summary = require('jshint-summary');
// ...
.pipe(jshint.reporter(summary({
verbose: true,
reasonCol: 'cyan,bold',
codeCol: 'green'
})
and the summary function will initialise the function passed to JSHint with those settings - see the page on Github for a bit more documentation.
It's got some very basic tests, and the library's gulpfile.js uses it to show its own JSHint output :)
How about using similar technique, as you already did with phonegap?
var jshint = function (parameter) {
// todo: define paths with js files, or pass them as parameter too
exec('jshint ' + paths + ' ' + parameter);
};
Based on https://github.com/wearefractal/gulp-jshint/blob/master/index.js#L99 it appears that gulp-jshint doesn't facilitate passing more than the name to the reporter if you load it with a string. It seems a simple thing to extend though. I'll race you to a pull request. :D
Alternatively, try something like this:
var stylish = require('jshint-stylish');
// ...
.pipe(jshint.reporter(stylish(opt)));
I'm pretty sure I have the syntax wrong, but this may get you unstuck.
It's annoying, and makes any decent reporter somewhat tricky to use within the existing framework. I've come up with this hack for the Stylish reporter, it's just currently in my gulpfile.js:
function wrapStylishReporter(reporterOptions) {
var reporter = require(stylish).reporter,
reporterOptions = reporterOptions || {};
var wrapped = function(results, data, config) {
var opts = [config, reporterOptions].reduce(function(dest, src) {
if (src) {
for (var k in src) {
dest[k] = src[k];
}
}
return dest;
}, {});
reporter(results, data, opts);
};
return jshint.reporter(wrapped);
}
And then for the task definition itself:
gulp.task('lint', function() {
return gulp.src('+(bin|lib)/**/*.js')
.pipe(jshint())
.pipe(wrapStylishReporter({ verbose: true }))
.pipe(jshint.reporter('fail'));
});
Ideally reporters would either be a function that takes an options parameter and returns the reporter function, or a fairly basic class so you could have options as well as state.
I have a problem where I am trying to get the Karma runner to execute my mocha specs that are loaded using RequireJS. Unfortunately, I can't figure out why the specs won't execute even though the framework is loading. Here are the relavant bits I hope:
// karma.conf.js
// Karma configuration
// Generated on Thu Jun 13 2013 13:38:06 GMT-0500 (CDT)
// base path, that will be used to resolve files and exclude
basePath = '';
// list of files / patterns to load in the browser
files = [
MOCHA,
MOCHA_ADAPTER,
REQUIRE,
REQUIRE_ADAPTER,
// !! libs required for test framework
{pattern: 'test/lib/chai.js', included: false},
// !! put what used to be in your requirejs 'shim' config here
'app/bower_components/angular/angular.js',
'app/bower_components/angular-cookies/angular-cookies.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/bower_components/angular-resource/angular-resource.js',
'app/bower_components/angular-sanitize/angular-sanitize.js',
'app/bower_components/angular-scenario/angular-scenario.js',
'app/bower_components/jquery/jquery.js',
{pattern: 'app/scripts/**/*.js', included: false},
{pattern: 'test/**/*Spec.js', included: false},
'test/test-main.js'
];
// list of files to exclude
exclude = [
'app/scripts/main.js'
];
// test results reporter to use
// possible values: 'dots', 'progress', 'junit'
reporters = ['progress'];
// web server port
port = 9876;
// cli runner port
runnerPort = 9100;
// enable / disable colors in the output (reporters and logs)
colors = true;
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel = LOG_INFO;
// enable / disable watching file and executing tests whenever any file changes
autoWatch = true;
browsers = ['Chrome'];
// If browser does not capture in given timeout [ms], kill it
captureTimeout = 60000;
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun = false;
Then this is my test-main.js file which handles the requireJS loading
var tests = [];
for (var file in window.__karma__.files) {
if (/Spec\.js$/.test(file)) {
tests.push('../../' + file.replace(/^\/base\//, '').replace(/\.js$/, ''));
}
}
requirejs.config({
baseUrl: '/base/app/scripts/',
paths: {
chai: "../../test/lib/chai",
namespace: "vendor/namespace",
jquery: "../bower_components/jquery/jquery",
bootstrap: "vendor/bootstrap",
angular: "../bower_components/angular/angular",
angularCookies: "../bower_components/angular-cookies/angular-cookies",
angularResource: "../bower_components/angular-resource/angular-resource",
angularSanitize: "../bower_components/angular-sanitize/angular-sanitize",
applicationController: "controllers/application",
gameController: "controllers/game",
gamePresenter: "directives/game-presenter",
}
});
require(tests, function(){
window.__karma__.start();
});
This is an example of my spec that I am running:
define(['chai', 'namespace','racecar'],
function(chai, namespace, racecar) {
var assert = chai.assert,
expect = chai.expect,
should = chai.should();
// This executes correctly!
var player = new com.angular.racecar.Player();
player.should.be.an('object');
// This never gets run!
describe('Player', function () {
it('should be an object', function () {
var player = new com.angular.racecar.Player();
player.should.be.an('object');
});
});
});
Here is an example of the code I am testing:
(function() {
"use strict";
var Player;
namespace('com.angular.racecar', {
Player: Player = (function() {
function Player() {
this.car = new com.angular.racecar.Car();
return this;
}
return Player;
})()
});
}(this)
The output simply says:
INFO [Chrome 27.0 (Mac)]: Connected on socket id fc4Kj9T0ppIzp9D0kmdH
Chrome 27.0 (Mac): Executed 0 of 0 SUCCESS (0.192 secs / 0 secs)
Angular-mock is supposed to work only with Jasmine. To make it work with Mocha you need to use the modified angular-mock created by http://www.yearofmoo.com/ described in their testing article. The direct link to the file is https://github.com/yearofmoo-articles/AngularJS-Testing-Article/tree/master/test/lib/angular
To use mocha tests you need to use the unstable branch of angular JS, and in that >= v1.1.1
You can see they added mocha support here : https://github.com/angular/angular.js/blob/master/CHANGELOG.md#111-pathological-kerning-2012-11-26
Diff: https://github.com/angular/angular.js/commit/92558fe4119fb1ee793d781de1888abef181c7f6