Here is my gulpfile.js
var gulp = require('gulp');
var download = require('gulp-download');
var unzip = require('unzip');
gulp.task('download-selenium', function(){
download('https://selenium.googlecode.com/files/selenium-server-2.39.0.zip')
.pipe(unzip.Extract({ path: 'selenium' }))
.pipe(gulp.dest("selenium"));
});
When I launch it I have the following issue:
$ gulp download-selenium
[gulp] Using file /Users/toutpt/makina/nmd/carteeco/mockup/gulpfile.js
[gulp] Working directory changed to /Users/toutpt/makina/nmd/carteeco/mockup
[gulp] Running 'download-selenium'...
[gulp] Errored 'download-selenium' in 9.08 ms Cannot pipe. Not readable.
/Users/toutpt/makina/nmd/carteeco/mockup/node_modules/gulp/node_modules/orchestrator/index.js:153
throw err;
^
Error: Cannot pipe. Not readable.
at Extract.Writable.pipe (_stream_writable.js:125:22)
at Gulp.gulp.task.server (/Users/toutpt/makina/nmd/carteeco/mockup/gulpfile.js:99:6)
at module.exports (/Users/toutpt/makina/nmd/carteeco/mockup/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:31:7)
at Gulp.Orchestrator._runTask (/Users/toutpt/makina/nmd/carteeco/mockup/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/Users/toutpt/makina/nmd/carteeco/mockup/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/Users/toutpt/makina/nmd/carteeco/mockup/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
at Gulp.run (/Users/toutpt/makina/nmd/carteeco/mockup/node_modules/gulp/index.js:20:14)
at /usr/local/lib/node_modules/gulp/bin/gulp.js:132:19
at process._tickCallback (node.js:415:13)
at Function.Module.runMain (module.js:499:11)
So How could I extract my downloaded file ?
Remember, gulp uses Streams for the file. npm unzip does not send a pipe-able stream as an output.
For this case you would be best off to not use the gulp.dest, but instead use the unzip extract path.
Try this:
var gulp = require('gulp');
var download = require('gulp-download');
var unzip = require('unzip');
gulp.task('download-selenium', function(){
download('https://selenium.googlecode.com/files/selenium-server-2.39.0.zip')
.pipe(unzip.Extract({ path: './selenium' }));
});
gulp-download doesn't seem to be maintained anymore, and gulp-gunzip has a more up-to-date example:
var gulp = require('gulp')
var request = require('request')
var source = require('vinyl-source-stream')
var gunzip = require('gulp-gunzip')
var untar = require('gulp-untar')
gulp.task('default', function () {
return request('http://example.org/some-file.tar.gz')
.pipe(source('some-file.tar.gz'))
.pipe(gunzip())
.pipe(untar())
.pipe(gulp.dest('output'))
})
Related
I am not able to pass settings to the uncss module in case I want to call it within postcss within a gulp script.
Here is my gulp task:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var cssvars = require('postcss-simple-vars');
var nested = require('postcss-nested');
var cssImport = require('postcss-import');
var mixins = require('postcss-mixins');
var uncss = require('postcss-uncss');
var autoprefixer = require('autoprefixer');
var autoprefixeroptions = {
"browsers": [
"last 3 version",
"> 1%"
]
}
var uncssoptions = {
html: ['dest/index.html'],
ignore: ['.text-right', '.text-left', '.affix', '.navbar-default.affix',
/\w\.in/,
'.fade',
'.collapse',
'.collapsing',
/(#|\.)navbar(\-[a-zA-Z]+)?/,
/(#|\.)dropdown(\-[a-zA-Z]+)?/,
/(#|\.)(open)/,
'.modal',
'.modal.fade.in',
'.modal-dialog',
'.modal-document',
'.modal-scrollbar-measure',
'.modal-backdrop.fade',
'.modal-backdrop.in',
'.modal.fade.modal-dialog',
'.modal.in.modal-dialog',
'.modal-open',
'.in',
'.modal-backdrop'
]
};
gulp.task('styles', function() {
var plugins = [
cssImport,
mixins,
cssvars,
nested,
uncss(uncssoptions),
autoprefixer(autoprefixeroptions)
];
return gulp.src('./src/css/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('./dest/css'));
})
When I try this, I get at runtime (when I change something in a css file) the folowing error message:
[Browsersync] Serving files from: dest
[12:20:39] Starting 'styles'...
[12:20:39] 'styles' errored after 295 μs
[12:20:39] TypeError: uncss is not a function
at Gulp.<anonymous> (C:\Projects\test\gulp\tasks\styles.js:50:3)
at module.exports (C:\Projects\test\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (C:\Projects\test\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (C:\Projects\test\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (C:\Projects\test\node_modules\orchestrator\index.js:134:8)
at C:\Projects\test\gulp\tasks\watch.js:19:10
at write (C:\Projects\test\node_modules\gulp-watch\index.js:147:3)
at C:\Projects\test\node_modules\gulp-watch\index.js:130:5
So, how else fo i setup uncss in a gulp file, when i call it as a postcss module?
Thank you
Kai
Ok, I solved it myself. I forgot to use uncss in the package.json file along with postcss-uncss. Now it works.
I hope you like that contribution. In all my googling, i was not able to find this answer in the web.
BTW, this sample shows how to use uncss on Bootstrap.
$ gulp build
[02:36:37] Using gulpfile C:\xampp\htdocs\melodic\gulpfile.js
[02:36:37] Starting 'build'...
[02:36:37] Starting 'clean:dist'...
[02:36:37] Finished 'clean:dist' after 4.63 ms
[02:36:37] Starting 'sass'...
[02:36:37] Starting 'useref'...
[02:36:37] Starting 'img'...
[02:36:37] Starting 'cleancss'...
[02:36:37] Finished 'cleancss' after 37 ms
C:\xampp\htdocs\melodic\node_modules\gulp-useref\node_modules\vinyl-
fs\lib\src\index.js:20
throw new Error('Invalid glob argument: ' + glob);
^
Error: Invalid glob argument:
at Object.src (C:\xampp\htdocs\melodic\node_modules\gulp-
useref\node_modules\vinyl-fs\lib\src\index.js:20:11)
at DestroyableTransform.addAssetsToStream
(C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:62:15)
at C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:124:31
at Array.forEach (native)
at DestroyableTransform.processAssets
(C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:115:11)
at C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:178:31
at Stream.<anonymous> (C:\xampp\htdocs\melodic\node_modules\gulp-
useref\node_modules\event-stream\index.js:318:20)
at _end (C:\xampp\htdocs\melodic\node_modules\through\index.js:65:9)
at Stream.stream.end
(C:\xampp\htdocs\melodic\node_modules\through\index.js:74:5)
at DestroyableTransform.onend
(C:\xampp\htdocs\melodic\node_modules\through2\node_modules\readable-
stream\lib\_stream_readable.js:577:10)
I have tried to remove the running tasks one by one but to no avail. What throws me off also is the fact that it seems to run through all the tasks and even finishing them and then crashing as the last task is finished. Thanks in advance.
EDIT: Here is my gulpfile as I forgot to include it.
var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
//Requires browser synch
var browserSync = require('browser-sync').create();
//Requires userref
var useref = require('gulp-useref');
//Requires uglify
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
//Requires cssnano
var cssnano = require('gulp-cssnano');
//Requires imagemin
var imagemin = require('gulp-imagemin');
//Requires cache
var cache = require('gulp-cache');
//Requires del
var del = require('del');
//Requires run-sequence
var runSequence = require('run-sequence');
//requires postcss
var postcss = require('gulp-postcss');
//ACTIVE COMMANDS
/*Run 'gulp browserSync' in commandline.
This task automatically reloads the broswer upon each save of document*/
gulp.task('browserSync', function() {
browserSync.init({
injectChanges: true,
server: {
baseDir: "./app"
},
})
});
/*Run 'gulp sass' in command line.
THIS TASK GETS ALL SCSS IMPORTED INTO THE app.scss FILE AND CONVERTS IT INTO app.css.
THIS TASK IS A ONE TIME CONVERSTION*/
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.stream({match: '**/*.css'}));
});
/*Run 'gulp watch' in command line.
THIS TASK GETS ALL SCSS AND OTHER FILE TYPES AND CONVERTS THEM ACITVELY.
THIS TASK IS ONGOING*/
gulp.task('watch', ['browserSync', 'sass'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
});
//PRODUCTION/FINAL COMMANDS
/*Run 'gulp useref' in command line.
THIS TASK GETS ALL CSS AND OTHER FILE TYPES AND JOINS DIFFERENT FILES AND MINIMIZES THEM IN THE DIST FOLDER.
*/
gulp.task('useref', function(){
return gulp.src('app/*.html')
.pipe(useref())
// Minifies only if it's a JavaScript file
.pipe(gulpIf('*.js', uglify()))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'))
});
gulp.task('cleancss', function () {
return gulp.src('./src/*.css')
.pipe(postcss())
.pipe(gulp.dest('./dest'));
});
/*Run 'gulp img' in command line.
MINIMIZSES PHOTOS TO THE DIST FOLDER*/
gulp.task('img', function(){
return gulp.src('app/img/**/*.+(png|jpg|gif|svg)')
.pipe(imagemin({
// Setting interlaced to true
interlaced: true
}))
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest('dist/img'))
});
/*Run 'gulp fonts' in command line.
CLEANS THE DIST DIRECTORY FOR UNUSED FILES*/
gulp.task('clean:dist', function() {
return del.sync('dist');
});
/*Run 'gulp fonts' in command line.
CLEANS THE IMAGE CACHE CREATED EARLIER*/
gulp.task('cache:clear', function (callback) {
return cache.clearAll(callback)
});
gulp.task('build', function (callback) {
runSequence('clean:dist',
['sass', 'useref', 'img', 'cleancss'],
callback
)
});
gulp.task('default', function (callback) {
runSequence(['sass','browserSync', 'watch'],
callback
)
});
EDIT: Included my gulpfile for further details.
Can not create a symbolic link to the /var/www/project/bower_components/bootstrap/less/mixins folder via Gulp JS. I tried to specify the desired path via the nodeJS.
VARIANT 1
CODE:
var gulp = require('gulp');
var path = require('path');
var debug = require('gulp-debug');
var symlink = require('gulp-sym');
gulp.task('symlink-deploy', function () {
var mixins = gulp
.src('' + path.resolve() + 'bower_components/bootstrap/less/mixins/')
.pipe(symlink('' + path.resolve() + 'assets/less/'))
.pipe(debug({title: 'unicorn:'}));
return Promise.all([mixins]);
});
gulp.task('default', ['symlink-deploy']);
RESULT:
user#user-ThinkPad-Edge-E545:/var/www/project$ gulp symlink-deploy
[17:18:44] Using gulpfile /var/www/project/gulpfile.js
[17:18:44] Starting 'symlink-deploy'...
[17:18:44] Finished 'symlink-deploy' after 28 ms
events.js:141
throw er; // Unhandled 'error' event
^
Error: EISDIR: illegal operation on a directory, read
at Error (native)
user#user-ThinkPad-Edge-E545:/var/www/project$
I have also was tried set path manually:
VARIANT 2
CODE:
var gulp = require('gulp');
var path = require('path');
var debug = require('gulp-debug');
var symlink = require('gulp-sym');
gulp.task('symlink-deploy', function () {
var mixins = gulp
.src('/home/user/www/project/bower_components/bootstrap/less/mixins')
.pipe(symlink('/home/user/www/project/assets/less'))
.pipe(debug({title: 'unicorn:'}));
return Promise.all([mixins]);
});
gulp.task('default', ['symlink-deploy']);
RESULT:
user#user-ThinkPad-Edge-E545:/var/www/project$ gulp symlink-deploy
[17:57:55] Using gulpfile /var/www/project/gulpfile.js
[17:57:55] Starting 'symlink-deploy'...
[17:57:55] Finished 'symlink-deploy' after 27 ms
events.js:141
throw er; // Unhandled 'error' event
^
Error: Destination file exists (/home/user/www/project/assets/less) - use force option to replace
at Transform._transform (/var/www/project/node_modules/gulp-sym/index.js:55:26)
at Transform._read (/var/www/project/node_modules/gulp-sym/node_modules/readable-stream/lib/_stream_transform.js:184:10)
at Transform._write (/var/www/project/node_modules/gulp-sym/node_modules/readable-stream/lib/_stream_transform.js:172:12)
at doWrite (/var/www/project/node_modules/gulp-sym/node_modules/readable-stream/lib/_stream_writable.js:237:10)
at writeOrBuffer (/var/www/project/node_modules/gulp-sym/node_modules/readable-stream/lib/_stream_writable.js:227:5)
at Transform.Writable.write (/var/www/project/node_modules/gulp-sym/node_modules/readable-stream/lib/_stream_writable.js:194:11)
at write (/var/www/project/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623:24)
at flow (/var/www/project/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:632:7)
at DestroyableTransform.pipeOnReadable (/var/www/project/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:664:5)
at emitNone (events.js:67:13)
user#user-ThinkPad-Edge-E545:/var/www/project$
Can't understand why it is't working.
I'm trying to concatenate my JS files and run them through Babel for a new project, but instead of overwriting the destination file on each task run, my gulpfile only appends changes to the file. So my destination file ends up looking like this:
console.log('hello');
//# sourceMappingURL=app.js.map
console.log('goodbye');
//# sourceMappingURL=app.js.map
What am I missing? Below is my gulpfile.
Thanks in advance.
var gulp = require('gulp');
var sourcemaps = require("gulp-sourcemaps");
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var babel = require('gulp-babel');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('js', function(){
return gulp.src("./app/js/*.js")
.pipe(sourcemaps.init())
.pipe(concat("app.js"))
.pipe(babel())
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("./app/js/"));
});
gulp.task('js-reload', ['js'], reload);
gulp.task('serve', ['js'], function() {
browserSync.init({
server: "./app"
});
gulp.watch("./app/js/*.js").on('change', ['js-reload']);
gulp.watch("./app/*.html").on('change', reload);
});
gulp.task('default', ['js', 'serve']);
You're reading and writing to the same destination directory. Therefore the file app.js is first read, some stuff is added to it, and then the result is written to app.js, causing this appending behaviour. You should output to a different directory than you are reading from.
I'm trying to minify a scss file using clean-css and get a useful sourceMap file.
My current gulp-task is:
var gulp = require('gulp'),
sourcemaps = require('gulp-sourcemaps'),
sass = require('gulp-sass'),
through = require('through2');
CleanCSS = require('clean-css'),
applySourceMap = require('vinyl-sourcemaps-apply');
var minify = through.obj(
function minify(file,encoding,callback) {
// do normal plugin logic
var result = new CleanCSS({sourceMap:file.sourceMap
,target: "./src"}).minify(file.contents.toString());
console.log(file.sourceMap)
file.contents = new Buffer(result.styles);
// apply source map to the chain
if (file.sourceMap) {
applySourceMap(file, result.sourceMap.toString());
}
this.push(file);
callback();
}
);
gulp.task('style', [],function () {
return gulp.src('./myfile.scss',{cwd: 'src'})
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(minify)
.pipe(sourcemaps.write('../maps/style',{sourceRoot:'/source/src'}))
.pipe(gulp.dest('./build/style/'))
});
when I run this setup I get the following error:
Error: Source map to be applied is missing the "file" property
at assertProperty (node_modules/vinyl-sourcemaps-apply/index.js:32:13)
at applySourceMap (node_modules/vinyl-sourcemaps-apply/index.js:11:3)
at DestroyableTransform.minify [as _transform] (/gulp/tasks/style.js:21:4)
at DestroyableTransform.Transform._read (/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
at DestroyableTransform.Transform._write (/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12)
at doWrite (/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:237:10)
at writeOrBuffer (/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:227:5)
at DestroyableTransform.Writable.write (/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:194:11)
at Stream.ondata (stream.js:51:26)
at Stream.emit (events.js:95:17)
at queueData (/node_modules/gulp-sass/node_modules/map-stream/index.js:43:21)
at next (/node_modules/gulp-sass/node_modules/map-stream/index.js:71:7)
at /node_modules/gulp-sass/node_modules/map-stream/index.js:85:7
at handleOutput (/node_modules/gulp-sass/index.js:100:3)
at opts.success (/node_modules/gulp-sass/index.js:63:7)
at options.success (/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:164:7)
If I add a dummy file path (or remove the assertions at node_modules/vinyl-sourcemaps-apply/index.js:32:13)) the source maps are generated however it does not recognize the original files (I.E. the scss files that gulp-sass compiled) and instead all my sources are mapped to `stdin' virtual file.
How can I get clean-css to recognize the location of the mapped sources processed by gulp-sass?