FAQ Database Discussion Community


Gulp Watch Isn't Watching

gulp
I am just getting started with gulp and it is really cool. I am starting to use it by simply compiling Sass files (getting more complicated things working later). I want it to work like Sass's watch. Here is my gulpfile.js: // Include Gulp var gulp = require('gulp'); // Include...

How to gulp ignore files with a specific pattern?

gulp
How do I tell gulp to ignore all files beginning with a "_", es. _colors.styl from compiling? Thanks...

Is there a way to refresh the task list in VSCode?

gulp,vscode
The first time I open VSCode, it scans my gulpfile and populates the task list. However, if I add a new task to my gulpfile, and then Run Task, it will only show the initially loaded tasks. Is there a way to manually refresh the task list? Right now I've...

Gulp appending to files, not overwriting

gulp,gulp-concat
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...

Browserify uglify via node script or command line?

javascript,node.js,gulp,browserify,uglifyjs
It seems in many places the professionals are building their projects using a node.js script that involves either gulp or grunt. What I can't figure out though, is why the script method is preferrable? When switching from the command line version to the script version, you add other packages in:...

Gulp - Sourcemapping less while combining media queries

less,media-queries,gulp,combine-media-queries
In this project I am leveraging "Gulp" for some tasks, but recently got a request to add sourcemapping.. I have the sourcemap working, but it seems to have a conflict with other plugins like 'gulp-combine-mq' and "gulp-combine-media-queries" aka "cmq" When running my styles task with "cmq" commented out, i get...

Utilising the output of two previous gulp streams

javascript,stream,gulp
I would like to take the result of a CSS processing step getCss, and a JS processing step getJs, then use these two results to create a file named index.html, which is the result of inlining the processed CSS and processed JS into a template named index-template.html. Can someone help...

How to set up wiredep with gulp and jade

javascript,jade,gulp,wiredep
I am trying to inject bower files into my jade/html using wiredep. The issue is twofold. If I were to keep the bower_component in the root folder. Being that my server is set up from ./dist and not from root, I am unable to reach bower_compoents If I were to...

Copy angular-ui-grid fonts into .tmp/fonts

angularjs,fonts,gulp,angular-ui-grid
I was experiencing a known issue with Angular UI Grid where some of my fonts would look Korean in production. I applied a certain fix by adding the following CSS: @font-face { font-family: 'ui-grid'; src: url('../fonts/ui-grid.eot'); src: url('../fonts/ui-grid.eot#iefix') format('embedded-opentype'), url('../fonts/ui-grid.woff') format('woff'), url('../fonts/ui-grid.ttf?') format('truetype'), url('../fonts/ui-grid.svg?#ui-grid') format('svg'); font-weight: normal; font-style: normal; }...

Check if file exist in Gulp

javascript,node.js,gulp
I need to check if a file exists in a gulp task, i know i can use some node functions from node, there are two: fs.exists() and fs.existsSync() The problem is that in the node documentation, is saying that these functions will be deprecated...

Gulp task for multiple files

node.js,gulp
I'm trying to create a gulp task that creates (in this case minifies) a css file for every project css there is. So for Project A it should combine and minify the following files: global.projecta.css tool1.projecta.css tool2.projecta.css It needs a kind of loop or something...? If there is a new...

Object property is undefined

javascript,object,gulp
I don't know if I'm missing something here, but for some reason a configuration object I create is always undefined upon using: gulpfile.config.js var config = { src_path: "Client/" }; gulpfile.js var config = require("./gulpfile.config.js"); gulp.task("test", function() { util.log(config.src_path); // results in 'undefined' }); Do objects have to be initialized...

Browserify does not resolve external file

javascript,gulp,browserify
I'm trying to use browserify inside gulp. The Gulpfile.js contains the simple task: gulp.task('browserify', function () { var x = browserify('./src/main/js/init.js'); return x.bundle({ ignoreMissing: true }) .pipe(source('init.js')) .pipe(gulp.dest('./dist/js/')); }); Where init.js is: require("d3"); I'm trying to use the alias "d3" which is an external dependency which browserify should not try...

Include libraries with Composer, NPM or Bower

php,npm,composer-php,gulp,bower
I have been getting into Composer, NPM and Bower recently. I no there's a lot of overlap between their capabilities and I was wondering if my approach is sane? If not, what should I do? I typically start my PHP projects by setting up composer to load my PHP libraries...

How can you pipe a readable stream to gulp.dest()?

node.js,gulp
I've got the following sample code which attempts to pipe a stream to gulp.dest(): var gulp = require('gulp'); var stream = require('stream'); var readable = new stream.Readable; readable.push('Hello, world!'); readable.push(null); readable .pipe(gulp.dest('./test.txt')); This code produces the following error: path.js:146 throw new TypeError('Arguments to path.resolve must be strings'); ^ TypeError: Arguments...

Gulp task does not run - becomes a callback for other tasks instead

gulp
I have a task that goes like this: var gulp = require('gulp'); gulp.task('doStuff', ['a', 'b', 'c'], function () { console.log("success"); }); I have read the docs, and from what I understood, this is what should happen: gulp creates a task called doStuff; gulp runs tasks a, b and c asynchronally;...

Why do I have to use vinyl-source-stream with gulp?

javascript,gulp,browserify
I am trying to use gulp and browserify to transform my .jsx files into .js files. var gulp = require('gulp'); var browserify = require('browserify'); var reactify = require('reactify'); gulp.task('js', function () { browserify('public/javascripts/src/app.jsx') .transform(reactify) .bundle() .pipe(gulp.dest('public/javascripts/dist')) }); ``` The above threw Arguments to path.resolve must be strings. I managed to...

Using GULP to load Jquery CDN and other external JS sources

javascript,jquery,gulp
I've been trying to find a definitive answer to a problem I'm having using GULP to load the latest jquery CDN or any other Javascript CDN external sources. What I've got so far is all our JS files being found in a folder, concatenated to a single file and placed...

gulp copying from source to destination is not working

gulp
var gulp=require('gulp'), gutil=require('gulp-util'); gulp.task('default',function(){ gulp.src('G:\node\node_modules\npm\test\gulpfile.js').pipe(gulp.dest('G:\node\node_modules\npm\test\sample')); return gutil.log("inside"); }); i'm a beginner to gulp.js . i have tried to cpoy a file from a source loaction to a destination location. It doesn't show any errors. But the file is not copied in destination location. I tried even different locations but...

JSHint Gulp to error window VS2015

gulp,jshint,visual-studio-2015
How can I get the output from JSHint to show up in my Error List in Visual Studio 2015 when using Gulp, rather than just output to the Task Runner? I've tried this package but that doesn't seem to do anything except format the Gulp output slightly differently. This is...

ES6 - Using babel/traceur with jQuery plugins

javascript,jquery,gulp,ecmascript-6,babel
I want to be able to write ES6 with jQuery plugins and compile the code down to ES5 using Gulp Babel, without having to use Browserify to make them work. For example, I may have a class like this: import $ from 'jquery'; import somePlugin from 'somePlugin'; class myClass {...

Trying to run a Gulp script that needs ruby on PHPStorm

ruby,shell,sass,gulp,phpstorm
I've edited a simple Gulp pipeline (that i've tested and works outside the IDE) and i'm now trying to include it into PHPStorm Project in order to achieve a better css workflow in a real project. This is the script, (it's a simple css optimization pipeline): var gulp = require('gulp'),...

CDATA showing up in my HTML page. Why?

javascript,jquery,html5,gulp,cdata
I have an HTML page but when I load it on my phone there is a long text that begins with something like "CDATA". I didn't add anything like that to my page. I minified and concatenated my JavaScript with Gulp into one file. I have the velocity.js and jQuery...

How to include jQuery to my app?

javascript,jquery,angularjs,gulp,bower
I'm developing the app based on angular gulp generator. I want to use the angular-ui and bootstrap components. I am able to build the application, but generated index.html file contains script tags for boostrap, angular ui but jquery is missing here. I have jquery in bower.js file and I ran...

Gulp task not waiting the completion of the previous task

javascript,gulp,gulp-watch,gulp-rev
I have a gulp task that uses streams to write a revised file (using gulp-rev) and another task that uses the previously written manifest file for replacing a variables in an html file. My first task: gulp.task('scripts', function() { // other stuff... var b = browserify(mainscript); b.external('External') .transform(babelify) .bundle() .pipe(source('app.js'))...

How to pass parameters in gulp dependencies

parameters,dependencies,task,gulp
I'd like to prepare a different versions of a software by passing a special parameters in gulp task. I've created tasks for css, js, etc. and made one to run then all: gulp.task('compile', ['css', 'twig', 'js', ....]); How to pass a parameter which will be passed also to the subtasks?...

Getting gulp-sourcemaps to map correctly with a series of plugins

gulp,gulp-uglify,gulp-sourcemaps
I have a git repo with multiple plugins (1 main one and several that are only intended to work with the main one). I am using this approach for distribution, since bower doesn't provide a way to have more than one plugin per git repo. So, I need to minify...

Not able to access variables in required file

javascript,gulp,require,browserify
I'm using browserify on a project and am running in to the following: I have a file test.js. In test.js there is nothing but the following: var test = 'test'; Now, in the same directory I have my main file 'app.js'. I require test.js and try to access the 'test'...

Gulp throws an error when bundling angular and angular-hammer with browserify

angularjs,gulp,browserify,hammer.js
Gulp throws an unclear error when I am trying to bundle angular and angular-hammer (the Ryan Mullins version) with browserify. For a stripped down version of the app, the package.json file is: { "name": "hammer-test", "version": "0.0.0", "description": "", "main": "app/main.js", "devDependencies": { "browserify": "^10.2.1", "browserify-shim": "^3.8.7", "gulp": "^3.8.11", "vinyl-source-stream":...

Font symbols don't display correctly with css generated from gulp-iconfont

javascript,css,svg,gulp,icon-fonts
So, I'm using gulp-iconfont to generate icon font from svg icons. I've set up task in a next way: gulp.task('iconfont', function(){ gulp.src(['src/assets/icons/*.svg']) .pipe($.iconfont({ fontName: 'material', normalize: true })) .on('codepoints', function(codepoints) { console.log(codepoints); gulp.src('src/templates/material.styl') .pipe($.consolidate('mustache', { glyphs: codepoints, fontName: 'material', fontPath: '../fonts/', className: 'md' })) .pipe(gulp.dest('src/styles/plugins')); }) .pipe(gulp.dest('build/fonts/')); });...

Prevent intermediate compass file output when piping

gulp,compass,gulp-compass
I'm using gulp-compass to compile scss files. However, I'm concatenating output into a single file. This all works fine, but I'm noticing that compass itself is writing the individual files to the output directory. I'm left with the individual files, as well as the concatenated result. Is there any way...

Laravel elixir - more specific error messages from gulp

less,gulp,laravel-elixir
I'm receiving the following error when trying to compile the less files for a theme that I purchased that was packaged with less files. Here's the output I'm seeing: $ gulp [22:53:49] Using gulpfile ~/path/to/gulpfile.js [22:53:49] Starting 'default'... [22:53:49] Starting 'less'... [22:53:49] Running Less: resources/assets/less/style.less [22:53:49] Finished 'default' after 524...

Gulp task runs much faster without 'return' statement - why is that?

build,return,task,gulp
Gulp task formed like this (without return) runs much faster: gulp.task('less', function () { gulp.src('./less/**/*.less') .pipe(less()) .pipe(gulp.dest('./destination')); }); than the same one with return: gulp.task('less', function () { return gulp.src('./less/**/*.less') .pipe(less()) .pipe(gulp.dest('./destination')); }); So, my question is what does Gulp task is supposed to return? Why is it so much...

Code breaks after using gulp-uglify : Ionic Framework

ionic-framework,gulp,ionic
I'm just new to Ionicframework and new to using gulp. I am currently setting up my workflow and I use gulp-uglify to minify my app files. After using it the code breaks so I checked on the console and got this error. Uncaught Error: [$injector:modulerr] Failed to instantiate module ebhealth...

Karma not starting phantomJs

angularjs,node.js,phantomjs,gulp,karma-runner
I'm loosing my mind here. I have a gulp task that looks like this. var gulp = require("gulp"); var karma = require("karma").server; gulp.task("test", function (done) { karma.start({ configFile: __dirname + "/karma.conf.js", action:"run" }, function () { done(); }); }); My karma.conf.js looks like this: module.exports = function (config) { config.set({...

Browserify transform with reactify

reactjs,gulp,browserify,watchify,reactify
I am trying to build a project using gulp. Unfortunately I am experiencing some trouble with it. This is what my gulpfile.js looks like: 'use strict'; var watchify = require('watchify'); var browserify = require('browserify'); var gulp = require('gulp'); var source = require('vinyl-source-stream'); var buffer = require('vinyl-buffer'); var gutil = require('gulp-util');...

How do I compile mustache templates partials with gulp?

gulp,mustache
I make prototypes of static HTML pages with Mustache/Sass/Compass-watch under Ruby. This setup is VERY slow, so I want to move to building everything with Gulp. I managed to have it build Sass, but not Mustache. It just doesn't see partials in mustache templates. My file structure is like this:...

How do i go to parent directory when using __dirname?

javascript,node.js,directory,gulp,gulp-karma
Directory structure : WebApiRole GulpFile.js test Karma.conf.js Gulp code from GulpFile.js gulp.task('test', function (done) { karma.start({ configFile: _configFile: __dirname + '\\..\\test\\karma.conf.js', singleRun: true }, done); }); So my problem going to the parent directory and access the karma.conf.js . For some reason the path is not get resolved with ..\\...

Ignoring task dependencies in gulp.js

javascript,build,dependencies,gulp
I have the following task gulp.task('sass-build', ['clean-build'], function () { // do stuff }); which obviously requires clean-build to be finished before starting. However, I would also like to use this task with gulp.watch without the clean-build dependency. I'm aware that you could solve this with a helper task like...

Gulp / Bower - maintaining consistency

node.js,gulp,bower
I feel like im missing something stupid here, can someone explain to me why i can't pull in .bowerrc into gulp? The file structure and process should be extremely simple: global.js "use strict"; var gulp = require('gulp'); var bowerRC = require('../.bowerrc'); module.exports.getBowerRC = function() { return console.log(JSON.stringify(bowerRC)); } .bowerrc {...

angular-bootstrap modal background is not transparent after uglify

angularjs,twitter-bootstrap,gulp,uglifyjs,angular-bootstrap
Angular Bootstrap modal is not working correctly in Gulp production mode, but in dev mode it works fine. My GULP method which responsible for code compression: gulp.task('scripts-prod', function() { return gulp.src(paths.vendorJavascript.concat(paths.appJavascript, paths.appTemplates)) .pipe(plugins.if(/html$/, buildTemplates())) .pipe(plugins.concat('app.js')) .pipe(plugins.ngAnnotate()) .pipe(plugins.uglify({ mangle: { except: ['angular', 'angular-bootstrap'] } })) .pipe(plugins.rev()) .pipe(gulp.dest(paths.publicJavascript))...

concatenating scss file with lots of other scss files

gulp
I have the next files structure: modules/ list/ news/ news.scss login/ login.scss common/ common.scss And I want to get next structure using gulp: modules/ list/ news/ news.scss news.css login/ login.scss login.css common/ common.scss Here is part from my gulpfile: gulp.src("modules/list/*/*.scss") .pipe(sass()) .pipe(gulp.dest("modules/list/")); In common.scss there are different variables. It is...

Issue with task not executing when using gulp with run-sequence

gulp,gulp-watch,run-sequence,gulp-jscs
I am new to gulp and so I put a simple script together to 1) learn how gulp works and 2) improve my development workflow. The issue I am having is that if I set the runSequence task list to be in the order of jscs and then lint, the...

Strange npm behavior when installing packages like grunt

node.js,gruntjs,npm,gulp,bower
I run the following command in my bash and I get the related results: [email protected]:~$ sudo npm install -g grunt-cli /usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt [email protected] /usr/local/lib/node_modules/grunt-cli ├── [email protected] ├── [email protected] ([email protected]) └── [email protected] ([email protected], [email protected]) and [email protected]:~$ grunt /usr/bin/env: node: No such file or directory I also have try to install...

Excluding files for BrowserSync not working

node.js,npm,gulp,browser-sync
I'm currently following John Papa's course on JavaScript Build Automation with GulpJS. At the moment I try to setup browser-sync with gulp-nodemon to keep my browser in sync. This is my gulp task to serve my development build: gulp.task('serve-dev', ['inject'], function () { var isDev = true; var nodeOptions =...

gulp concat after sass

sass,gulp,concat,gulp-concat
I would like to take the sass output and concat it to another css regular file. example: animate.css app.scss return gulp.src('app.scss') .pipe(sass({ errLogToConsole: true })) .pipe(concat(['animate.css', OUTPUT_OF_THE_SASS_ABOVE])) .pipe(gulp.dest(paths.public+'css/')) .pipe(rename({ extname: '.min.css' })) .pipe(gulp.dest('css/')) .on('end', done); any ideas how to do it? ******* IDEA maybe is it possible to generate the...

Angular 2/Typescript: require not found

typescript,gulp,angular2
I am trying to get the angular 2 example running with a gulp typescript compiler. The gulp-script compiles import {Component, View, bootstrap} from 'angular2/angular2'; to var angular2_1 = require("angular2/angular2") which does not run in the browser. What is wrong with this? As far as I know, this kind of implementation...

Gulp.js serve src files WITHOUT browserSync?

javascript,node.js,gulp,gulp-watch,browser-sync
Scaffolded a new project with Yeoman Gulp-Angular. I understand the premise of BrowserSync, but frankly I cannot comprehend how anyone tolerates having their network requests flooded by this: I would like to remove BrowserSync from my project immediately. How does one correct the following code in order to gulp serve...

How to detect css theme and work only with this theme?

gulp,gulp-watch
I have a project in which there are about 30 css themes. It means I have the next css files structure: src/ themes/ default/ a.scss b.scss rockStar/ a.scss b.scss oneMoreTheme/ a.scss b.scss dist/ themes/ default/ styles.css rockStar/ styles.css oneMoreTheme/ styles.css Here is just example of gulpfile: var gulp = require('gulp'),...

How to use shell read in gulp?

javascript,bash,shell,gulp,gulp-shell
I'm trying to set up a gulp file which asks for input from the user (for a variable name), but I can't get it working. I've got gulp-shell echo-ing fine, and it triggers the read command and asks for the input, but the variable isn't saved. Here's my gulp code:...

Heroku deploy of Gulp + Compass is not working at boilerplate stage

heroku,gulp,compass
I am using Gulp boilerplate from here and buildpack from here. Anyway, i just want to deploy clean boilerplate and no such code. I think it should work with just adding buildpack by heroku buildpacks:add ${url}. It doesn't work, giving me that output: C:\Users\Dawid\Desktop\Harvest>git push heroku master Counting objects: 541,...

Gulp task not accessing karma.conf.js file

javascript,node.js,gulp,karma-runner,gulp-karma
I am using following gulp task to execute the karma/jasmine unit test cases . however i was not able access the karma.conf.js file for some reason. this problem occurs when i use this pathpackage to access the karma.conf.js file. gulp task gulp.task('tdd', function (done) { karma.start({ configFile: fs.readFile(path.join(__dirname, '../Tests/karma.conf.js')), singleRun:...

gulp-assemble & gulp-watch not recompiling site when changes are made to data, includes or layouts

gulp,gulp-watch,assemble
I'm having issues using gulp-assemble with gulp-watch. I want gulp to watch the entire assemble source directory (data, includes, layouts and pages) and recompile the site when ever a file changes. I'm able to get this working correctly for pages, but gulp is not recompiling the site when changes are...

Building Ionic Sass using Compass still looking for Removed Sass task

sass,gulp,ionic,gulp-sass,gulp-compass
Using an ionic blank template with its default gulpfile and running: ionic setup sass I can build the application's Sass, but I wanted to add Compass. So using Gulp I added the below code to my gulpfile based on gulp-compass examples: gulp.task( 'compass', function( done ) { gulp.src( './scss/ionic.app.scss' )...

Perform a single notify action at end of a Gulp array

gulp
How can I perform the notify action once when an array is passed to src? gulp.src('./files/*.swig') .pipe(rename({ suffix: '.html' })) .pipe(notify('Templates rendered')); ...

gulp-insert exclude wrap certain files

javascript,gulp,gulp-insert
I want to use gulp-insert to do wrapping on every JS file, except .module.js file. Here is my gulp task: gulp.task('compressjs', function() { gulp.src("local/app/**/*.js") .pipe(sourcemaps.init()) // wrap each individual JS file .pipe(insert.wrap('(function(){"use strict";', '\n})();')) .pipe(uglify()) .pipe(concat('all.min.js')) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('public/app')); } It is wrapping every single JS file as expected. So, how...

How do I save a result of javascript to a file in gulp

javascript,json,gulp
To lower client machine overhead, I want to save a JSON result of javascript to a file as a build step using gulp. How can I do this?

forcing gulp to use a different hostname

cookies,dns,gulp
I need "gulp serve" to serve my application on a hostname that I added in my hosts file and not localhost. I'm doing this for cookie reasons since I'm adding domain key everytime I add a cookie. For example 127.0.0.1 app1.example.org When I start "gulp serve", it would trigger the...

Can I use grunt/gulp to pull a specific version of bootstrap css

twitter-bootstrap,gruntjs,gulp
I'm working on a build process that will compile bootstrap css with my overrides. I would like to specify a version of bootstrap in my config and have grunt/gulp go and get the .less files for that version and then compile them. Is there any plugin or process to have...

How to get rid of use strict in gulp file with JavaScript

gulp
I need to remove all 'strict mode'. the below code runs without error but my 'strict mode'; does not change to ; gulp.task('bundle', function () { var bundled = bundle(bundler()) if (!production) return bundled; return bundled .pipe(buffer()) .pipe(replace(/"use strict"'/g, ';')) // problem line .pipe(plugins.uglify()) .pipe(plugins.rename({ suffix: '.min' })) .pipe(gulp.dest('dist/app')); });...

Asp.net 5 Web template missing Bower files

gulp,asp.net-5
ASP.NET 5 has a folder named Dependencies->Bower which the default Web template contains things like bootstrap, hammer.js, and jquery. These dependencies are copied to a lib folder according to gulpfile.js. var paths = { bower: "./bower_components/", lib: "./" + project.webroot + "/lib/" }; For some reason my site is missing...

Gulp copy single file (src pipe dest) with wildcarded directory

node.js,gulp
I am trying to copy a specific file src C:\Project\dir1\dirv-1.0.0\tools\file.exe to a specific directory dest C:\Project\dir2\ using gulp. The version number in dirv-1.0.0 could change in the future, so I want to wildcard the version number. Here is the task I have for that (gulpfile.js is in C:\Project): gulp.task('copy', function(){...

How to setup jade includes with gulp-jade

javascript,node.js,gulp
I am currently using gulp-jade and I am struggling on how to setup Jade includes in my gulpfile.js.(For clarification, I am referring to this here http://jade-lang.com/reference/includes/) The following is the code in my gulpfile.js var gulp = require('gulp'); var browserSync = require('browser-sync'); var sass = require('gulp-sass'); var uglify = require('gulp-uglify');...

Error installing Gulp

node.js,terminal,gulp,taskmanager
I am pretty new to using terminal and installing gulp, but I am running through a few errors. Errors keep popping up and I am not sure why. My goal for right now is to install gulp globally, but not sure if any old files are interfering. Maybe a clean...

Microsoft Azure - Gulp 3.8.10 does not work on fresh Web App instance

azure,npm,gulp,kudu
I am using a fresh instance of a Web App with Node 12.3 and NPM 2.9.1. Gulp PATH appears to be set to D:\Program Files (x86)\gulp\3.8.10. I believe Gulp 3.8.10 has a bug that should be fixed with an update to 3.8.11. I am unable to use gulp until this...

Multiple React components in a single module

reactjs,gulp,browserify
I am new to the whole browserify thing. I have been trying to use browserify + reactify + gulp to transform, minify and combine a React application. As long as I have a single React.createClass with a single module.exports = MyComponent everything works fine. Since I have several shared components...

Get an array of file names without extensions from a directory in Gulp?

npm,gulp
I want to get each of the file names in 2 directories (helpers/ and dialogs/) into an array without the file extension using Gulp and/or NPM. Note that the array will be pre-populated with values - I need to append the file names to this array. In other words, my...

browser-sync is blocked by chrome csp

google-chrome,gulp,content-security-policy,browser-sync
I have a gulp task that runs browsersync. var options = { proxy : 'localhost:9000/html' , port : 3000 , files : [ config.root + config.srcPaths.htmlBundle , config.htmlRoot + 'main.css' , '!' + config.htmlRoot + '**/*.scss' ] , injectChanges : false , logFileChanges : true , logPrefix : 'broserSync ->'...

Rails minify/optimize files on the fly using Grunt or Gulp

ruby-on-rails,gruntjs,gulp,sidekiq
My Rails 4 application allow it's users to import some Adobe Edge animation files (advertisement). While it works, Adobe Edge is loading a bunch of files that could be minified and optimized (images) using a tool like Grunt or Gulp. I'm using CarrierWave to upload the files and then I...

Use a concatenated string as JavaScript object property name

javascript,gulp
Well, I need to get all the values from an array and put them in a loop, however I can not pass the value to the property name of the object. Any idea how to do this? var functionCases = [ "functions", "document.ready", "window.load", "document.scroll", "window.resize" ]; functionCases.forEach(function(i){ gulp.src(bermuda()) .pipe(gfi({...

Gulp - TypeError: Cannot assign to read only property 'cwd' of bower / bootstrap.css

css,twitter-bootstrap,command-line,gulp,bower
I'm just getting to grips with Gulp.js and this is the only error I can't seem to get around. I have install bootstrap via bower, and I'm trying to minify the bootstrap css. Here's my gulp task; gulp.task('minifycss', function() { gulp.src('www/css/animate.css', 'www/bower_components/bootstrap/dist/css/bootstrap.css') .pipe(minifycss({compatibility: 'ie8'})) .pipe(gulp.dest('www-deploy/css/')); }); However when I run...

Streaming directly to gulp.dest

javascript,node.js,gulp
I’d like to make npm module which returns stream and then pipe it to gulp.dest in some other app. Example: // some-module.js module.exports = function() { return require('fs').createReadStream('someFile.txt'); } // gulpfile.js gulp.task('default', function() { var myModule = require('./some-module'); myModule().pipe(gulp.dest('./')); }); Unfortunately for this code I got: path.js:313 throw new TypeError('Arguments...

Watch multiple directories using gulp-sass

sass,gulp,gulp-sass
I have .scss files in two different directories: ./blog/styles/ ./common/styles/ There is a file in ./blog/styles called blog.scss and I'm importing .scss files from ./blog/styles/ (i.e. same directory) and ./common/styles/. How should I create gulp task to watch both these directories and create final .css files somewhere else (say in...

Configure Gulp 'watch' task for very basic server-restart (Node JS)

node.js,gulp,gulp-watch
I'm trying to get the Gulp 'watch' task to restart the server when I make a change to a controller file.. to pick up those changes w/out having to manually restart the server. Can someone post a small example with instructions to run it correctly?...

Compass Line Number Comments Not Showing Up with Gulp

css,sass,gulp,compass
I am attempting to make the switch from GruntJS to Gulp and have run into a problem with my Gulp task for processing my SASS files via Compass. The files compile just fine into the single CSS file as they did under my GruntJS implementation, but I am missing the...

Gulp configuration not working

gulp,gulp-watch,gulp-sass,gulp-concat,gulp-uglify
I'm trying to run Gulp to minify CSS, JS and move all the static stuffs (template, font, img) into build folder. My project directory structure: - project |- gulpfile.js |- package.json |- src ||- font ||- img ||- js ||- sass ||- template |- build ||- css ||- font ||-...

sass file not compiled by gulp

css,node.js,sass,npm,gulp
I want to switch from less to sass so I installed gulp-sass with npm and modified my gulpfile to compile sass instead of less (nothing else changed). Sadly gulp doesn't compile my .scss file to css and after googling and trying all i could think of it still doesn't compile....

Load libraries with wiredep

angularjs,gulp,bower
I am doing my first steps in AngulaJS. And i try load dependences via Bower and a Gulpfile. I have instaled wiredep, gulp-inject and bower. In my Gulpfile.js i have defined the next tasks: 'use strict'; var gulp = require('gulp'); var inject = require('gulp-inject'); var wiredep = require('wiredep').stream; gulp.task('inject', function()...

Inject variable into html via Gulp Task

gulp,gulp-inject
I'm using Gulp and a number of plugins to template my HTML and minify my HTML i.e. "gulp-file-include", "gulp-inject", "gulp-minify-html" none seem to offer a way of injecting a constant at build time i.e something like this: .pipe('*.html', $.gulpVar({urlpath: 'www.myurl.com'}))) then in my HTML a reference to the variable Contact...

How to configure port in browser-sync

node.js,gulp,browser-sync
I have a gulp task running with browser-sync,by default its running on port 3000 of node.js server.I want to change the default port to any other port like 3010. var gulp = require('gulp'), connect = require('gulp-connect'), browserSync = require('browser-sync'); gulp.task('serve', [], function() { browserSync( { server: "../ProviderPortal" }); }); /***...

How to copy all files in same directory as gulpfile?

javascript,node.js,gulp
My gulpfile.js is in the same folder as the project folder. I'm trying to copy all the folders and files over to dist/: // copy all files in current dir gulp.src("./**/*", {base: "./"}) .pipe(gulp.dest('dist')); But this doesn't copy anything over. Why?...

How can I achieve this using gulp?

javascript,node.js,stream,gulp
I am enumerating the subdirectories in a directory. For each sub directory I would like to apply a number of gulp activities like less compilation, and then create an output file specific to that subdirectory. I would like the gulp process to continue, as further transformation steps need to be...

Start hexo to generate a watch in a gulpfile.js?

gulp,hexo
I have the following gulpfile.js var gulp = require('gulp'), browserSync = require('browser-sync'), sass = require('gulp-sass'), bower = require('gulp-bower'), notify = require('gulp-notify'), reload = browserSync.reload, bs = require("browser-sync").create(), Hexo = require('hexo'), hexo = new Hexo(process.cwd(), {}); var src = { scss: './scss/', css: './source/css', ejs: 'layout' }, watchFiles = [ './scss/*.scss',...

How do I prevent gulp watch from crashing (e.g. stop watching) when using elixir in laravel 5?

laravel-5,gulp,gulp-watch,laravel-elixir
So I like elixir a lot. But when I run gulp watch and write css (scss to be precise), it crashes after a couple of saves, thus forcing me to start gulp watch again. And it is driving me crazy, almost to the point of me not being able to...

Install package.json dependencies globally

json,node.js,npm,gulp
There is the following 'package.json' file with dependencies: { "name": "xxx_web_app", "version": "1.0.0", "description": "", "main": "gulpfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "some.git" }, "author": "", "license": "ISC", "dependencies": { "bower": "^1.4.1", "connect-history-api-fallback": "^1.1.0", "gulp": "^3.8.11", "gulp-clean": "^0.3.1",...

cssnext not write file

node.js,docker,gulp
I run cssnext (1.3.0) with gulp (3.8.11) on docker (1.6) container (official node image) and my OS is ArchLinux (host). The node version is 0.10.38. I have a problem, i can't solve. This is my gulpfile.js: var gulp = require('gulp'); var cssnext = require("gulp-cssnext"); gulp.task("css4Tocss", function() { gulp.src("css/index.css") .pipe(cssnext({ compress:...

Difference between bower, browserify, requirejs, webpack?

javascript,requirejs,gulp,bower,browserify
I'm used to simple and small JS projects where the JS dependencies are concatenated and minified as part of the build process using something like gulp and the script tag in the html contains the hardcoded path to that minified JS file. It's not elegant and probably has several disadvantages,...

Memory leak caused by gulp & nodemon

node.js,gulp,mean,nodemon,gulp-livereload
I have this simple gulpfile that basically compiles some less files and triggers livereload. I also have nodemon to restart the server when code is changed. var gulp = require('gulp'), less = require('gulp-less'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), // imagemin = require('gulp-imagemin'), rename...

How to minify gulp-webpack file?

javascript,node.js,compression,gulp,webpack
Have a follow situation: gulp.task('webpack', function(cb) { gulp.src('webpack-init.js') .pipe(webpack({ output: { filename: 'bundle.js', }, })) .pipe(gulp.dest('./client/js')); cb(); }); All ok, but i want to minify output file. If i use gulp-uglify directly - .pipe(webpack(...)) .pipe(uglify().on('error', gutil.log)) .pipe(gulp.dest('./client/js')); have an error: "Unexpected token: punc ())]" and others of that ilk. ...

How to concat multiple js files inside a function in gulp

javascript,jquery,gulp,gulp-concat
I need to concat all the specific files within their corresponding functions using Gulp with the following folder structure: modules - header - document.ready.js - functions.js - window.resize.js - main - document.ready.js - functions.js - window.resize.js - footer - document.ready.js - functions.js - window.resize.js The final file should look like...

Uglify Is Minifying `new Obj();` Wrong

javascript,gulp,gulp-uglify
I am using gulp and gulp-uglify to minify my javascript code. Gulp var uglify= require('gulp-uglify'); gulp.task('javascript', function() { return gulp.src('./scripts/*.js') .pipe(uglify()) .pipe(gulp.dest('./')); }); Original javascript var Site = Site || {}; Site.Code = { obj: new ThirdPartyObject(), init: function() { obj.thirdPartyMethod(); } }; Minified javascript var Site = Site ||...

automate npm update,bower prune, bower update inside gulpfile as gulp tasks

npm,gulp
I want to automate my gulpfile with the following tasks(gulp.task). npm update bower prune bower update Every time anyone changes package.json and bower.json, I just run gulp and the packages get installed/updated/deleted without having to run these commands through terminal....

Use Gulp-imagemin with imagemin-jpeg-recompress plugin?

jpeg,gulp,gulp-imagemin
I'm just experimenting with Gulp to simply optimize images. I find that imagemin-jpeg-recompress reduces JPGs more than the default optimizer that comes with gulp-imagemin. I'm wondering if there is a way to use gulp-imagemin but swap out the jpegtran plugin for the the imagemin-jpeg-recompress. I can't seem to find any...

Trying to understand a Gulp build error - Emitting error involving zlib.js & Gzip

node.js,gulp
Has anyone seen this error? I cannot understand the origin of the error. Searching for an answer has been fruitless. To give some context, I was merging changes from another branch via SVN, which probably mangled the merge, but I still can't figure out what went wrong within the logic....

Ignore certain Gulp-less errors, or prevent it from attempting to call @imports with css keyword

fonts,error-handling,less,gulp
So I am using gulp as a task engine to handle less compilation (among other things), and part of our stylesheets include fonts from fonts.com. Here's the relevant task in our gulpfile: var gulp = require('gulp'), plugins = require('gulp-load-plugins')({ camelize: true }); browserSync = require('browser-sync'); reload = browserSync.reload; gulp.task('styles', function()...

Unpredictable file order in gulp

javascript,order,gulp
I have the following task: var inject = require('gulp-inject'); ... gulp.task('index-build', function () { return gulp.src(config.index) .pipe( inject(gulp.src(config.build + '/vendor/**/*.js', { read: false })) ) .pipe(gulp.dest(config.build)); }); Mostly this does what it's supposed to: concatenate files in alphabetic order within the paths, resulting in something like: ... <script src="/vendor/angular/angular.js"></script> <script...

Live reload for electron application

gulp,gulp-watch,electron
I want to use a combination of VScode + Gulp + Electron to build an application. A nice feature of the development workflow would be to add an live reload task to my Gulp watch task, to reload the Electron application on every change. Any Idea how to achieve this?...

Webpack Uglify plugin returns “Killed” on Ubuntu

gulp,webpack
On my remote server (Ubuntu 14.04 x64), whenever I try to uglify my bundles, the process simply returns "Killed". When I don't uglify, it's just fine. Has anyone run into this? When I do it on my local Mac, it's fine (although I just tested it and it took 1.4...

Gulp command stops with Error: spawn ENOTDIR

node.js,gulp,gulp-sass
I recognize that there are many similar questions, but none with a solution that I can find. I am trying to compile Sass and JS but am getting the following error: Error: spawn ENOTDIR at exports._errnoException (util.js:746:11) at ChildProcess.spawn (child_process.js:1162:11) at exports.spawn (child_process.js:995:9) ... and so on... It appears that...

Gulp - build files with custom folders

javascript,gulp
I'm creating a workflow to build custom e-mail templates. In my folder, I have this structure: folder/ templates/ template-001.html image-001.jpg images/ image-default.jpg src/ style.scss I'm using gulp-inline-css to get the compile css file and insert all the styles inline in the file template-001.html. Then, the task gets all these files...