Gulp pipe to separate destination folders

I am writing a gulp task that goes through several folders and watches for less files. I want to pipe the compiled css back to the same folder the less file came from. Unfortunately, I can't seem to find a good way to give each of the files a separate output folder. gulp.task('less:watch', function() { watch({ glob: 'src/**/less/**/*.less', emit: 'one', emitOnGlob: false },function(files){ return files .pipe(less({ paths: [ pat

Gulp Laravel Elixir - Compile/concat all less files into one css file?

So I have my custom less styles in my custom/module folder. They will all be compiled but the problem is it's creating an individual css file for each of the less files. How can I get EVERYTHING, including the my boostrap/vendor plugins etc to stack first, and all my custom css to be concatenated after, all moved to main.css? Is this possible with Elixir/Gulp? I am coming from Grunt and am a bit confused as there is not a lot of documentation on Elixir. elixir(function(mix) { mix.less([

Continuous Integration: Test With Gulp + Codeship (gulp-jasmine)

When I run my back-end test, codeship mentions that nothing is returned: 13 specs, 0 failures Finished in 0 seconds [16:31:49] Finished 'testBECodeship' after 5.34 s This command didn't output anything for for a while, thus we stopped it. If the error is on our end please inform us so we can help you to fix this. Gulp Code: gulp.task('testBECodeship', function () { return gulp.src(paths.specs + '/backend/**/*.spec.js') .pipe($.jasmine({verbose: true})); }); I also could use just ja

Gulp bundle then minify

I'm creating 3 minified bundles for my application. I have 2 tasks to do this, minify, and bundle. Minify has a dependency on bundle. If I run minify, both tasks run with no errors. The bundles are created, but the minified files are not. If I remove the dependency on bundle, I can then run minify by itself and the minified files are created successfully. This leads me to believe maybe the files are in use when the minify task triggers (because bundle hasn't finished?). How do I cause it

Why is Wiredep erroring out with "dest.on is not a function" in my gulp task?

Im trying to use Wiredep in a Gulp task to inject Bower dependencies in my index.html file. The following task (without Wiredep) runs fine. gulp.task('build', ['copy', 'assets'], function(){ return gulp.src('app/index.html') .pipe(inject(gulp.src(['dist/assets/js/*.js', 'dist/assets/css/*.css'], {read: false}), {relative: true})) .pipe(gulp.dest('dist')); }); Now I tried to add Wiredep to it: var wiredep = require('wiredep'); gulp.task('build', ['copy', 'assets'], function(){

Browser-sync is not refreshing files observed by gulp-watch

In my build process I want to put the artifacts of the build steps into .tmp/serve directory. I managed to set up gulp-watch to fire specific tasks when I modify files in my working directory. E.q. when I modify htmls, they are built and the artifacts are pasted into desired .tmp/serve directory I'm having problems with reloading the files from .tmp/serve with browser-sync. When I save changes in my working directory multiple times, browser-sync refreshes only the previous changes (1 change d

gulp generate html file with jade via markdown json

I'm using gulp-markdown-to-json and gulp-jade My aim is to grab data from markdown file which looks like this: --- template: index.jade title: Europa --- This is a test. grab template: index.jade file and pass it along with other variables to jade compiler. So far I've this: gulp.task('docs', function() { return gulp .src('./src/docs/pages/*.md') .pipe(md({ pedantic: true, smartypants: true })) .pipe(jade({ jade: jade, pretty: true })) .

Gulp: delete generated .png from dest when .svg removed from src

I have a Gulp task creating .png fallbacks for .svg files in a src folder: gulp.task('svg2png', ['svg'], function() { return gulp.src(src + '/svg/**/*.svg') .pipe(plugins.newer(dest + '/svg')) .pipe(plugins.svg2png()) .pipe(gulp.dest(dest + '/svg')) .pipe(plugins.notify({ message: 'svg2png task complete', onLast: true })); }); (The svg task is svgmin) I wanted to tidy up behind myself by deleting generated files (in the dest folder) and thought to extend the watch task as bel

BrowserSync.reload causes "write after end" during gulp task

I am trying to get browserSync to work with a watch task for a Polymer app. Here is my gulp file: function source() { return project.splitSource() .pipe(gulpif('**/*.html', html.lint())).on('end', log('Linted HTML')) .pipe(gulpif('**/*.html', html.minify())).on('end', log('Minified HTML')) .pipe(gulpif('**/*.js', javascript.minify())).on('end', log('Minified Javascript')) .pipe(gulpif('**/*.js', javascript.babelify())).on('end', log('Transpiled Javascript')) .pipe(g

Gulp Task Error: 'Checksum error in glyf'

I am attempting to run a Gulp task and I get an error that I have no idea how to fix or even debug. The Gulp file and tasks have been created by NetSuite and haven't been editted by myself (they should work out of the box). Any idea what node package could be causing the following error and how I can fix the error? Maybe I need to use a different version of SASS or Font-Awesome? C:\Users\MyUser\SuiteCommerce Advanced Mont Blanc>gulp local [08:48:45] Warning: gulp version mismatch: [08

local gulp not found after installing globally and locally

I have installed gulp both globally sudo npm install --global gulp-cli and locally npm install --save-dev gulp /usr/local/bin/gulp exists, and ./node_modules/gulp and ./node_modules/gulp-cli exist. When I try to run gulp on the command line, I get the common error $ gulp [00:55:43] Local gulp not found in ~/dev/myProj/play-java-seed [00:55:43] Try running: npm install gulp One thing that I noticed is that if I run gulp in some random directory (~/foo), the error message is that the loc

Gulp Imagemin not enough for google page speed insights?

I am using gulp-imagemin for a while, but few months ago i noticed that google page speed unsatisfied by my compressed images. I tried all combinations of settings but without result. Also tried imagemin-cli and direct jpegtran - all the same, on large images it gives 2-5% compression and tinyfy gives 50%. When I use some cloud optimisers(tinify) it give right compression. My current gulp task looks like: gulp.task('imagemin', function() { return gulp.src(input_files) .pipe

Gulp How to keep my relative paths with clean-css minifying?

Why does gulp code below remove my relative paths? I am using clean-css: gulp.task('build-css', function() { return gulp.src([ 'style.css', ]) .pipe(sourcemaps.init()) .pipe(cleanCSS({debug: true})) .pipe(concat('bundle.min.css')) .pipe(sourcemaps.write('./maps')) .pipe(gulp.dest('dist')) .pipe(livereload()); }); Original css: @font-face { font-family: 'icomoon'; src: url('../fonts/social-media/icomoon.eot?mh2h47');

Gulp Uglify problems with $super global in Prototype

I'm trying to use gulp-uglify to compress and uglify all JS files recursively in my directory: var gulp = require('gulp'); var uglify = require('gulp-uglify'); gulp.task('compress', function () { return gulp.src('js/**/*.js') .pipe(uglify({ mangle: {reserved: '$super'}})) .pipe(gulp.dest('js_dist')); }); gulp.task('default', ['compress']); This works okay, but I noticed javascript errors throughout my website. This is because in the Prototype file I can see just one occu

Gulp PostCSS: PurgeCSS not working when task is run

I'm currently trying to remove unused CSS from a project's stylesheets. I have a gulp task sass where all the compiling is being done. I'm using postcss and a plugin for purgecss. However, when I run the sass task purgecss doesn't seem to be working. gulp.task('sass', () => gulp.src(`${SRC}/scss/style-*.scss`) .pipe(sourcemaps.init()) .pipe(gulpSass({ includePaths: ['node_modules', `${PATTERNS_ACCESS}/src/`] .concat(require('bourbon').includePaths) }) .on('error', gulpSass.log

Gulp JS with live reload - what gets reloaded

I am testing Livereload with gulp.js and the Chrome extension for livereload. My gulpfile.js // gulpfile.js var gulp = require('gulp'), livereload = require('gulp-livereload'); gulp.task('watch', function() { var server = livereload(); gulp.watch(['dist/**']).on('change', function(file) { server.changed(file.path); }); }); In the dist folder, there are 5 files index.html (main page) app.css (css linked from index.html) app.js (javascript linked from index.html) inc

gulp-watch doesn't update gulp-jshint

what's wrong with this code: var gulp = require('gulp'); var watch = require('gulp-watch'); var connect = require('gulp-connect'); var jshint = require('gulp-jshint'); var stylish = require('jshint-stylish'); //lint module.exports = gulp.task('lint', function () { return gulp.src([config.paths.src.scripts,config.paths.exclude.bower]) .pipe(jshint()) .pipe(jshint.reporter(stylish)); }); //watch module.exports = gulp.task('watch', function () { watch(config.paths.src.scripts, ['lint']

piping the output of gulp to a variable

I'm using the gulp-run plugin to get the git hash using the following code: run('git log -1 --pretty=format:%H').exec(); I can add a pipe to save the output to a file, like so: run('git log -1 --pretty=format:%H').exec().pipe(gulp.dest('some/dir')); From there, I can read in the contents of the file using readFile() to get the git hash. Is there a way for me to skip this step, and get the output of gulp-run into a variable directly?

gulp-uglify notify on failing build

I am using gulp-uglify to compress & minify the javascript file. It runs perfectly. But the problem is, when there is javascript error in the file, it will fail to build and it doesn't show any sign of error informing the process is fail. gulp.task('compressjs', function() { gulp.src(['public/**/*.js','!public/**/*.min.js']) .pipe(sourcemaps.init()) .pipe(concat('all.js')) .pipe(wrap('(function(){"use strict"; <%= contents %>\n})();')) .pipe(uglify()) .pipe(ren

Gulp not watching correctly

I'm new to using gulp and I think I have it setup correctly, but it does not seem to be doing what it should be doing. My gulpfile.js has gulp.task('compass', function() { return gulp.src('sites/default/themes/lsl_theme/sass/**/*.scss') .pipe(compass({ config_file: 'sites/default/themes/lsl_theme/config.rb', css: 'css', sass: 'scss' })) .pipe(gulp.dest('./sites/default/themes/lsl_theme/css')) .pipe(notify({ message: 'Compass ta

Watch task not continuing after error caught by Gulp-plumber has been fixed despite errorHandler callback

So I got this neat gulpfile and all, and it's working smoothly except for this one thing. I'm running gulp-plumber to stop the watch task from crashing on an error, the error is getting caught by it but then when I fix the error, the watcher refuse to continue. I added the handleError callback but it doesn't appear to do anything even though this article says that it should. This is driving me to insanity because I know people who has gotten it working without any of these but none of the solu

unable to create following folder structure in gulp?

I have project structure like this -moduleA -styles -scripts -moduleB -styles -scripts -styles -scripts i want to get output so ending structure would like -moduleA -styles -scripts -moduleB -styles -scripts -styles -scripts -build -moduleA -styles -scripts -moduleB -styles -scripts

Gulp: Run code after asynchronous tasks have completed

I have a Gulp task with the following mission: Get a list of folders. Count the words in the folder. Report the count for each folder and a grand total count. So far, this is what I have. gulp.task('count', function() { ['folder1','folder2',...].forEach(function(folderName) { gulp.src(['./'+folderName+'/**/*.md']).pipe(countWords(folderName)); }); }); After all of the folders' words have been counted, I want to call a function reportGrandTotal. I have spent hours trying to figure o

Gulp use changed-in-place with multiple tasks that depend on each other

I'm using the gulp-changed-in-place package to only run certain Gulp tasks with the files that have changed (https://github.com/alexgorbatchev/gulp-changed-in-place). I'm having an issue where I only want to run my linting and code style tasks on changed files to speed up development time. My current setup is as follows: var gulp = require('gulp'); var changedInPlace = require('gulp-changed-in-place'); var eslint = require('gulp-eslint'); var jscs = require('gulp-jscs'); var config = { pa

Gulp: replace variables in HTML file based on file name

Our project is using Gulp. Now I have a requirement: we have multiple page-level HTML files, say login.html and my.html. Inside these original HTML files there is a variable called {{PAGE_TITLE}}, which should be replaced (by Gulp) to be "Login to System" and "My Account" respectively. Here is my current script: gulp.task('pages', ['clean:tmp'], function () { var pageTitle = ''; return gulp.src('/my/source/html/**/*.html') .pipe(tap(function (file, t) { pageTitle = /

Gulp Browser-Sync Loop

Newbie to using Gulp and Browser-Sync and I seem to be stuck in an infinite loop when using browserSync.reload() with files stored on a network drive. If I run the following code for files stored on my local machine it works perfectly fine, but if I run the code on files that are on the networked drive, the 'refresh' task keeps getting run over and over again with out me making any changes to files. var gulp = require('gulp'), browserSync = require('browser-sync'); gulp.task('browser

Attemoting to get browsersync to work from Gulp

Have been unable to get Browsersync working in Gulp. I have installed the standard JointsWP build (this is a wordpress/foundation mash up), but the following gulpfile doesn't kick off browsersync at all. I am using MAMP and the site works fine. Tried a few things but limited gulpfile knowledge. thanks in advance. // Grab our gulp packages var gulp = require('gulp'), gutil = require('gulp-util'), sass = require('gulp-sass'), cssnano = require('gulp-cssnano'), autoprefixer = require('gulp-auto

Gulp task with arguments (loop call wit another args)

I wanna call gulp task with different argument or with changed data. For example: I have list (names). I need repeatedly (Array length) call task by rotation with list[index] item. Something, like: var name = 'MyName', secondName = 'MySecondName'; var namesArr = ['Name1', 'Name2', 'Name3']; gulp.task('default', function(name) { // do something with 'name' }); gulp.task('cycle', function() { for (var i = 0; i < namesArrLength; i++) { geeer(name, packageName, i, 80000 * i);

how to inject javascript at header and body using gulp

I want to inject javascript library inside head tag and my customized and my own code at body using GULP. For Example: <html> <head> <!-- injectJS --> <script src="jquery.js"> <script src="d3.js"> <!-- injected --> </head> <body> <!-- injectJS --> <script src="index.js"> <!-- injected --> </body> </html>

Gulp 4 php with browserSync

I am new to gulp-4. I try run gulp js with php, browserSync it doesn't work? All other task work but php and browserSync not work at all. it's not open with browser anything is here wrong? is it possible to use with php with browserSync or any restrictions? I want to use browser sync with php but can't seem to get it to work. Here is my Code... const browsersync = require("browser-sync").create(); const gulp = require("gulp"); const imagemin = require("gulp-imagemin"); const sass = require("

Browser-sync, scripts and styles reload not working when migrating from gulp 3.x to gulp 4.x

I am trying to upgrade gulp from 3.x to 4.x When using gulp watch, the styles, scripts and inject function works well.But when I make any file changes the scripts and styles need to be loaded automatically. This is not working. I have tried adding gulp.series to each function. function isOnlyChange(event) { return event.type === 'changed'; } gulp.watch([ path.join(conf.paths.src, '/app/**/*.css'), path.join(conf.paths.src, '/app/**/*.scss') ], gulp.series(func

Gulp 4 BrowSersync not refreshing the webpage when SCSS files changed

I just started to use Gulp with BrowserSync. Please, help me with following issue: When I save my SCSS files BrowserSync not refreshes the webpage but saves files OK. Here is what happening in the console: [21:37:48] Starting 'css'... [Browsersync] 1 file changed (main.min.css) [21:37:48] Finished 'css' after 206 ms So no message "[Browsersync] Reloading Browsers..." This problem only with SCSS files, JS and HTML work correctly. Here is my gulpfile.js: let project_folder = requir

Gulp Copying Files from one Directory to another

I want to Gulp Copy Multiple Files gulp.task('copy', function(){ gulp.src( 'bower_components/bootstrap/dist/js/bootstrap.js', 'bower_components/jquery/dist/jquery.min.js', 'bower_components/jquery.stellar/src/jquery.stellar.js', 'bower_components/jquery-waypoints/waypoints.js', 'bower_components/jquery-easing-original/jquery.easing.1.3.js') .pipe(gulp.dest('public/assets/js')); }); To copy my files from my bower_components directory to my as

Can't get Gulp to reference Stylus files to generate sourcemaps

I'm having issues trying to generate sourcemaps for my CSS files. My current stack is: Gulp Stylus Autoprefixer There are two compiling steps: Gulp pre-compiles to CSS; Autoprefixer post-compiles the CSS to add browser vendor prefixes; I can't generate the sourcemaps on the first compilation, as the second one will add new lines to the CSS, and I'm quite lost on how to make them "talk" with each other. This is what I got so far. var gulp = require('gulp'); var paths = { src: 'src

How to configure Gulp task to copy bower resources

What is the right way to copy bower resources using gulp. I want a task "build" (for dev) that will: Transforme /src/index.jade to /build/index.html Copy bower resources to /build/vendor/* Copy my resources to /build/css, js, assets Inject this resources (my and bower's) in index.html I'm having trouble with "font awesome", because they resources (.ttf, .otf...) are referenced in font-awesome.css as: "../font/fontawesome-webfont.ttf" I tried with wiredep, that copied js and css to /vendor

Using gulp-inject: How to add query string to injected filename

I use gulp-inject to add files to load to index.html. To force browser to reload js-scripts, I want to add a query string to the filename that is injected into index.html. I suspect this is possible with gulp-inject's transform function. But reading the docs I do not understand how it could be solved. Do you?

Gulp Why would all my bower .css files get ignore but not .js

I am running the following task and all my .js files get inserted correctly between inside css tags, however, the story is the the same for html. What could be the reason, all my configurations seem to be correct. gulp.task('wiredep', function () { var wiredep = require('wiredep').stream; return gulp .src(config.index) .pipe(wiredep(config.wiredepDefaultOptions)) //wiredep injection configuration .pipe($.inject(gulp.src(config.js))) //custom js files configuat

Why doesn't gulp create files while executing tasks on Windows 8?

gulp doesn't create dist directory and files in it while executing tasks gulp.task('css', function () { gulp.src('./css/style.css') .pipe(stylus({ 'include css': true })) .pipe(rename({ suffix: '.min', extname: '.css' })) .pipe(gulp.dest('./dist/css')) .pipe(connect.reload()); }); No errors occur in the console dialog. However everything works fine on linux and mac. Please help me solve this problem.

Calling jspm minification from Gulp using gulp-jspm

I am working on a project which uses gulp to call jspm to minify all javascript files. Gulp task supposed to be run is gulp.task('jspm_minify', function () { gulp.src('./app/spa/app.js') .pipe(gulp_jspm ()) .pipe(gulp.dest('./wwwroot/js/')); }); this gives following error, Unhandled rejection Error: Unable to calculate canonical name to bundle C://\code\Dev-Stable\src\ProjectName.Web\app\spa\app.js at getCanonicalNamePlain (C:\code\Dev-Stable\src\ProjectName

Gulp inject task doesn't work when calling with run-sequence

Required steps clean build directory. compile typescript files then put compiled files in to build directory. inject compiled files as script to index.html then put it to build directory. Project structure -- build -- src --app --app.ts .. -- index.html index.html <!DOCTYPE html> <html lang="en"> <head> </head> <body> <!-- inject:js --> <!-- endinject --> </body> </html> Gulp tasks "devDependencies": { "del"

Setting up Gulp with mean.io

I'm pretty new to using the meanstack. I couldn't get mean.js to work. So I'm trying to get mean.io to function properly. Currently it works fine, when I just run $ node server. However when I install Gulp and try to run it that way, I get the following error: C:\Users\markl\Dropbox\Server\FS4>gulp C:\Users\markl\Dropbox\Server\FS4\gulpfile.js:6 var env = process.env.NODE_ENV || 'development'; ^^^ SyntaxError: Unexpected token var at exports.runInThisContext (vm.js:53:16)

sourcemaps in gulp not mapping to files

I've been searching for related questions and found no answer (or question, for that matter) for this. Most questions are about wrong paths or sourcemaps not being generated, but I have not found anything like this. When I process this task, i get a minified css file (bootstrap.min.css) and a sourcemap file (bootstrap.min.css.map). But, when I inspect the code which uses these files, SOME parts direct me to bootstrap.css (which does not exist) like if the source is the processed less file, in

gulp-image-resize to generate multiple output sizes

I'd like to use gulp to generate a bunch of different image sizes and optimize them at the same time. I think there are two approaches to this problem: The first is that you could create n different tasks for each size, then create a master task that calls each resize task. The master task might look something like: gulp.task('resize_images',['resize_100','resize_300','resize_800','resize_1000']); This seems ok, and you'd get good parallelization, but there is a lot of duplicated code for

Include file if other file doesn't exist in Gulp

I have a product that has a base version, but also customized versions for separate customers. I am using ASP.NET bundleconfigs to include specific files for the customers build, but I am trying to switch to Gulp. This is my simplified directory structure: - App - App / Js - App / Js / Base - App / Js / Base / file1.js - App / Js / Base / file2.js - App / Js / Base / file3.js - App / Js / Customer1 - App / Js / Customer1 / file2.js What I need to do is build a single JS file that contains fi

No gulp file found (windows)

have a problem with gulp. I've been using gulp for 3 months. And for the first time a have an issue like this: When I try to run gulp, command line shows: no gulp file found. I use node, and I got project from my friend to fix code. Thank, U!

Running PostCSS compiled style sheets through purifycss with Gulp

I have a task that first runs CSS files through postcss plugins and then through purifycss like this: .pipe(postcss(processors)) .pipe(purify(['src/test/html/*.html'])) .pipe(gulp.dest(PLI.target.test.css)); However the CSS is not being purified. Anyone know why? The actual task that is running the build can be found here: superfly-css-task-build If you clone this project and run npm i && npm run test and then look in the target/test/css/index.css all the un used CSS is still conta

Local preprocessing with Gulp, Stylus, and Browser-sync

I'm trying to setup CSS preprocessing and browser-sync for a client on windows. Prepros seems to be junk, and he can't use codeKit because it's Mac only. I gave him these resources: https://webdesign.tutsplus.com/tutorials/supercharge-your-local-wordpress-development--cms-28303 and https://browsersync.io/docs/gulp The preprocessing works great, but the browser has to be manually refreshed to see the CSS changes. Can you spot what is incorrect in this code? MAMP is also involved... so it could

how to run gulp tasks in order?

I am trying to concat all the css files into one released css file by running task: gulp.task('task one', () => { gulp.src([Dir + "**/*.css"]) .pipe(concat(outFilename + ".css")) .pipe(gulp.dest(destDir)); }); After that, because the font path in the output css file is not correct, so I need to modify the path. gulp.task('task two', () => { var urlAdjuster = require('gulp-css-url-adjuster'); //change font path for released css files gulp.src([releas

Gulp task is not working and even not shows any error

I just started learning gulp here I had written the task and run after run the task nothing is changed in my CSS file vendor prefixes are not added. I'm trying to add vendor prefixes and compress my CSS files. Can anyone suggest me. Is there my directory path is correct what I'm doing wrong here? why it is not working. And I used the latest version 4.0.1 Editor check dir path and task

  1    2   3   4   5   6  ... 下一页 最后一页 共 10 页