gulp postcss rem to pixel fall back - gulp

I'm trying to set up a gulp task to process rem unit automatically and add a pixel fallback.
Here is my gulfile.js:
// NPM install gulp gulp-less gulp-watch gulp-plumber gulp-livereload gulp-postcss autoprefixer-core css-mqpacker csswring --save-dev
// explanation task breakdown: http://stackoverflow.com/questions/23953779/gulp-watch-and-compile-less-files-with-import
var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var path = require('path');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer-core');
var mqpacker = require('css-mqpacker');
var csswring = require('csswring');
var pixrem = require('gulp-pixrem');
gulp.task('less', function() {
var processors = [
autoprefixer({browsers: ["last 8 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}),
mqpacker,
csswring({
preserveHacks: true,
removeAllComments: true
})
];
gulp.src('./style.less') // only compile the entry file
.pipe(plumber())
.pipe(less({
paths: ['./','./vendors/', './layouts', './partials/', './overrides/']
} ))
.pipe(pixrem('10px'))
.pipe(postcss(processors))
.pipe(plumber.stop())
.pipe(gulp.dest('./'))
.pipe(livereload());
});
gulp.task('watch', function() {
gulp.watch('./**/*.less', ['less']); // Watch all the .less files, then run the less task
});
gulp.task('default', ['watch']); // Default will run the 'entry' watch task
The task is now running and converting rems to pixel fallbacks thanks to gulp-pixrem.
The thing I can't seem to enable is switching the default root value. .pipe(pixrem('10px')) or .pipe(pixrem({rootvalue: '10px'}) doesn't change the base unit conversion.
.pipe(pixrem({ rootvalue: '10px' })) actually return an error TypeError in plugin gulp-pixrem Cannot read property '1' of null
Edit
Don't mind me.
.pipe(pixrem(100%)) is working fine.
End Edit

.pipe(pixrem(100%)) is working fine

Related

How to transpile CoffeeScript to JavaScript (last 2 versions and ie >= 11) using Browserify and coffeeify transform?

CoffeeScript 2 outputs latest, modern syntax which is not compatible with older browsers and gulp-uglify.
GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: operator «=», expected: punc «,»
Had a hard time figuring this one out so dropping some code here in case it can help others.
Gulp 4 and CoffeeScript 2 introduces breaking changes so updating dependencies can be tedious.
One breaking change is that CoffeeScript now outputs modern syntax that isn’t supported in older browsers (it also breaks gulp-uglify). To support these browsers (and to keep using gulp-uglify), transpilation is required.
Install packages
npm install #babel/core #babel/preset-env browserify coffeeify coffeescript glob gulp gulp-sourcemaps gulp-uglify gulp-util merge-stream vinyl-buffer vinyl-source-stream --save-dev
Edit gulpfile.js
'use strict';
const gulp = require('gulp');
const gutil = require('gulp-util');
const merge = require('merge-stream');
const browserify = require('browserify');
const glob = require('glob');
const source = require('vinyl-source-stream');
const path = require('path');
const buffer = require('vinyl-buffer');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
var minify;
if (process.env.MINIFY === 'true') {
minify = true;
} else {
minify = false;
}
function browserifyTask() {
var files = glob.sync('./app/*.coffee');
return merge(files.map(function(file) {
return browserify({
entries: file,
extensions: ['.coffee'],
debug: true
})
.transform('coffeeify', {
transpile: {
presets: [
[
'#babel/preset-env',
{
targets: {
browsers: ['last 2 versions', 'ie >= 11']
}
}
]
]
}
})
.on('error', gutil.log)
.bundle()
.pipe(source(path.basename(file, '.coffee') + ".js"))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe((minify === true) ? uglify().on('error', gutil.log) : gutil.noop())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('public/js'));
}));
}
const build = gulp.series(browserifyTask);
exports.default = build;

Gulp css styles are not updated

I have problem. Yestrday I had to update the Node.js kernel and now that I change something in the LESS file, there will be no css update. Gulpfile is the same as before the update. Could someone advise me what's wrong with my gulpfile script?
The HTML file update is OK.
//*********** IMPORTS *****************
var gulp = require('gulp'),
browserSync = require('browser-sync');
var postcss = require('gulp-postcss');
var less = require('gulp-less');
var watch = require('gulp-watch');
var livereload = require('gulp-livereload');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat-css');
var cssmin = require('gulp-cssmin');
/* BROWSERSYNC */
gulp.task('browserSync', function () {
var files = ['orient-spa/**'];
browserSync.init(files, {
server: {
baseDir: 'orient-spa/',
index: 'index.html'
},
logPrefix: 'OS01',
browser: ['chrome']
});
});
gulp.task('css', function () {
var processors = [
autoprefixer
];
return gulp.src('./orient-spa/skins/less/index-files.less')
.pipe(less())
.pipe(postcss(processors))
.pipe(gulp.dest('./orient-spa/skins/css/'))
.pipe(livereload());
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch('./orient-spa/skins/less/*.less', ['css']);
gulp.watch('./orient-spa/skins/css/*.css', ['concatMinify']);
});
gulp.task('concatMinify', function () {
return gulp.src('./orient-spa/skins/css/*.css')
.pipe(concat("index.css"))
.pipe(cssmin())
.pipe(gulp.dest('./orient-spa/skins/css/compiled'))
.pipe(livereload());
});
gulp.task('default', ['browserSync', 'watch', 'css', 'concatMinify']);
Thanks for your advice :-)
I try this path, but problem remains.
Last version node.js was Node.js 7.2.1 (Node.js), now Node.js 9.8.0.
I attach an image to the console after changing 1 line in the LESS file.
Here I see that the set of commands does not call correctly. Or they are called repeatedly. Do not you see a mistake here, please?
Thanks for your advice

Watchify does not update when using Webstorm

I am using watchify with gulp. When using notepad++ to edit source code, watchify works fine, but it does nothing when I edit with Jetbrain Webstorm 8.
Here is my gulpfile:
var browserify = require('browserify');
var watchify = require('watchify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
gulp.task('watchify', function(){
var bundler = browserify('./app/js/app.js', {
debug: true,
cache: {},
packageCache: {}
fullPaths: true
});
var watcher = watchify(bundler);
return watcher.on('update', function () { // When any files update
console.log('Updating!');
var updateStart = Date.now();
watcher.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./app/js'));
console.log('Updated!', (Date.now() - updateStart) + 'ms');
})
.bundle() // Create the initial bundle when starting the task
.pipe(source('bundle.js'))
.pipe(gulp.dest('./app/js'));
});
Is there anyway to make watchify work with Webstorm ?
Thanks for any help.
I posting this just for the sake of future searchers - I think the cause of that problem is Enabled "Use safe write". After disabling problems seems to disappear.
https://github.com/substack/watchify/issues/179

Gulp-sass with susy and sourcemaps

I'm trying to get Susy to work with gulp-sass (libsass) and sourcemaps. It's the sourcemaps that seems to be the problem, since without them, everything works as it should. I tried adding the IncludePaths to the Sass task but that didn't help. Susy is installed with Bower and resides in assets/bower_components/susy.
The error I'm getting looks like this:
c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\node_mo
dules\gulp-minify-css\node_modules\vinyl-sourcemaps-apply\node_modules\source-ma
p\lib\source-map\source-map-consumer.js:415
throw new Error('"' + aSource + '" is not in the SourceMap.');
^
Error: "/bower_components/susy/sass/susy/language/susy/_container.scss" is not i
n the SourceMap.
at SourceMapConsumer_sourceContentFor [as sourceContentFor] (c:\Users\Devote
e\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\node_modules\gulp-mini
fy-css\node_modules\vinyl-sourcemaps-apply\node_modules\source-map\lib\source-ma
p\source-map-consumer.js:415:13)
at SourceMapGenerator.<anonymous> (c:\Users\Devotee\hemsidor\vvv\www\bb2-new
-homepage\htdocs\app\themes\bb2\node_modules\gulp-minify-css\node_modules\vinyl-
sourcemaps-apply\node_modules\source-map\lib\source-map\source-map-generator.js:
233:42)
at Array.forEach (native)
at SourceMapGenerator_applySourceMap [as applySourceMap] (c:\Users\Devotee\h
emsidor\vvv\www\new-project\htdocs\app\themes\bb2\node_modules\gulp-minify-
css\node_modules\vinyl-sourcemaps-apply\node_modules\source-map\lib\source-map\s
ource-map-generator.js:232:34)
at applySourceMap (c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs
\app\themes\bb2\node_modules\gulp-minify-css\node_modules\vinyl-sourcemaps-apply
\index.js:23:15)
at c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\
node_modules\gulp-minify-css\index.js:122:11
at c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\
node_modules\gulp-minify-css\index.js:42:7
at whenSourceMapReady (c:\Users\Devotee\hemsidor\vvv\www\new-project\ht
docs\app\themes\bb2\node_modules\gulp-minify-css\node_modules\clean-css\lib\clea
n.js:94:62)
at c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\
node_modules\gulp-minify-css\node_modules\clean-css\lib\clean.js:100:77
at fromString (c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app
\themes\bb2\node_modules\gulp-minify-css\node_modules\clean-css\lib\utils\input-
source-map-tracker.js:25:10)
Sorry for the horrible formatting (Bash on Windows..).
My Gulpfile looks like this:
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// ==== CONFIGURATION ==== //
// Project paths
var src = 'assets/',
dist = 'dist/',
bower = src + 'assets/bower_components/',
css = dist + 'css/',
js = dist + 'js/'
;
// ### JS-linting-compiling
// Lint and minify our Javascript files
gulp.task('js-linting-compiling', function(){
// read all of the files that are in script/lib with a .js extension
return gulp.src('assets/js/*.js')
// run their contents through jshint
.pipe(jshint())
// report any findings from jshint
.pipe(jshint.reporter('default'))
// concatenate all of the file contents into a file titled 'all.js'
.pipe(concat('all.js'))
// write that file to the dist/js directory
.pipe(gulp.dest(js))
// now rename the file in memory to 'all.min.js'
.pipe(rename('all.min.js'))
// run uglify (for minification) on 'all.min.js'
.pipe(uglify())
// write all.min.js to the dist/js file
.pipe(gulp.dest(js));
});
// ### SASS-TO-CSS
// `gulp sass-to-css` - Compile SASS into CSS, autoprefix it and minify it. Also generate source maps (stripped in minified version)
gulp.task('sass-to-css', function () {
gulp.src('assets/sass/style.scss')
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: [
'assets/bower_components/susy/sass'
],
style: 'expanded',
errLogToConsole: true
}))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(sourcemaps.write())
.pipe(gulp.dest(css))
.pipe(reload({stream: true}))
.pipe(rename({
suffix: '_min'
}))
.pipe(minifyCSS({
keepSpecialComments:0,
}))
.pipe(gulp.dest(css))
.pipe(reload({stream: true}));
});
// ### Clean
// `gulp clean` - Clean our dist folder before we generate new content into it
gulp.task('clean', function (cb) {
del([
// here we use a globbing pattern to match everything inside the `dist` folder, except our gitkeep file
'dist/**/*',
'!dist/.gitkeep{,/**}'
], { dot: true },
cb);
});
// ### Build
// `gulp build` - Run all the build tasks but don't clean up beforehand.
// Generally you should be running `gulp` instead of `gulp build`.
gulp.task('build', ['sass-to-css', 'js-linting-compiling'], function() {
});
// ### Gulp
// `gulp` - Clean up the dist directory and do a complete build.
gulp.task('default', ['clean'], function() {
gulp.start('build');
});
// ### Watch
// `gulp watch` - Use BrowserSync to proxy your dev server and synchronize code
// changes across devices. When a modification is made to an asset, run the
// build step for that asset and inject the changes into the page.
// See: http://www.browsersync.io
gulp.task('watch', function() {
browserSync({
proxy: "local.project.dev",
host: "localhost",
notify: true,
});
gulp.watch(['assets/sass/**/*.scss'], ['sass-to-css']);
gulp.watch(['assets/js/**/*.js'], ['js-linting-compiling']);
gulp.watch('**/*.php', function() {
browserSync.reload();
});
});
Any ideas?
I had the same issue...
Trying to use the includePaths,
the #import in the sass file....
mixing one then the other then both ...
The only thing that has worked for me was moving from susy from bower_components to my sass folder, use a "normal" #import, and it worked.
I am not expert in gulp / node, it might look like a path issue => bower_components is outside the src definition of the gulp task... :/
Hope that helps

Gulp shell delay

I'm trying to execute a shell command at the end of a series of gulp tasks. I noticed that the changes written to the project's files aren't being written before the shell command picks up some of the files and copies them elsewhere. I'm using gulp-shell to execute my shell commands.
I found that if I executed a 'ls' command before my file copy, there's enough of a delay that the files are all written before I try to copy them. Is there a cleaner way to do this?
Here's the gruntfile:
var gulp = require('gulp');
var shell = require('gulp-shell');
var jshint = require('gulp-jshint');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');
var minifyHTML = require('gulp-minify-html');
var concat = require('gulp-concat');
//Uncomment out this line before going to production
//var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
// JS hint task
gulp.task('jshint', function() {
gulp.src('./code/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// minify new images
gulp.task('imagemin', function() {
var imgSrc = './code/img/**/*', imgDst = './www/img';
gulp.src(imgSrc)
.pipe(changed(imgDst))
.pipe(imagemin())
.pipe(gulp.dest(imgDst));
});
// minify new or changed HTML pages
gulp.task('htmlpage', function() {
var htmlSrc = './code/*.html', htmlDst = './www';
gulp.src(htmlSrc)
.pipe(changed(htmlDst))
.pipe(minifyHTML())
.pipe(gulp.dest(htmlDst));
});
// JS concat, strip debugging and minify
gulp.task('scripts', function() {
gulp.src(['./code/js/index.js', './code/js/*.js'])
.pipe(concat('script.js'))
//Uncomment out this line before going to production
//.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./www/'));
});
// CSS concat, auto-prefix and minify
gulp.task('styles', function() {
gulp.src(['./code/css/*.css'])
.pipe(concat('styles.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest('./www/'));
});
gulp.task('prepare', shell.task(['ls', 'cordova prepare']));
// default gulp task
gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles', 'prepare'], function() {
});
It's the prepare task - when it runs, the other files haven't finished executing yet.
It seems that I can set a dependent task that must finish before my prepare:
gulp.task('prepare', [styles], shell.task(['ls', 'cordova prepare']));
I haven't tested it, but I expect this will work?
Try gulp-run-sequence Gulp tasks are Async and this enables them to fire synchronously. Should solve your issue.