gulp-community / gulp-cached Goto Github PK

I'm trying to implement gulp-cached to speed up my sass task but I can't seem to get it to work with livereload. Is this not meant to work?

It seems to cache it as the task goes from 4 seconds on initial run to 20 something milliseconds on subsequent runs but it's not passed to the reload pipe.

This is my SASS task:

gulp.task('styles', function () {
    return gulp.src( paths.scss )
        .pipe( cache( 'sass' ) )
        .pipe( scss( options.scss ).on( 'error', gutil.log ) )
        .pipe( autoprefix( options.autoprefix ) )
        .pipe( gulp.dest( dests.css ) )
        .pipe( connect.reload() )
        .pipe( notify( { message: 'CSS task complete.' } ) );
});

Here's my full gulp file: http://hastebin.com/ihicukigaw.coffee

gulp.task('indexfiles', function() {
    return gulp.src('./**/index.src.php')
        .pipe(inlinesource())
        .pipe(usemin({
            inlinecss: [ minifyCss, 'concat' ],
            inlinejs: [uglify(), 'concat']
        }))
        .pipe(cache('index'))
        .pipe(gulpif(
            (process.env.ENV !== 'development'),
            replace('"/assets/', '"https://cdn/assets/')
        ))
        .pipe(rename({
            basename: 'index'
        }))
        .pipe(gulp.dest('.'));
});

Is there any way of telling the module that the outcome will be "index.php" because of the rename?
My source files are in the same directory as the output - source is index.src.php and output is index.php

Thanks!

Hi,

i have 'main' index.less file which @import some additional files like

@import a.less
@import b.less
@import c. less and so...

So i have a gulp watcher

gulp.watch([less folder path *.less], ['styles-frontend']);

on all less files, but my build function is like:

gulp.task('styles-frontend', function() {
    return gulp.src(path.stylesFrontend.src)
        .pipe(cache('styles-frontend'))
        .pipe(sourcemaps.init())
        .pipe(prefixer({
            browsers: ['last 5 versions']
        }))
        .pipe(less({
            errLogToConsole: true,
            plugins: [cleancss]
        }))
        .pipe(cssmin())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(path.stylesFrontend.dest))
});

The problem is that gulp-cached 'caching' only the 'index.less' file for it's name and contents, so if i update b.less - the cache will return the same file so nothing will change at all.

Any suggestion to run cache for every file?

Now on gulp-community.

The cached file is stored in the same directory as the source file, with the same extension. As a result, something like gulp.watch('some-dir/**/*.scss', ['lint-scss']) causes gulp to watch the cached files as well as the original source. This has been causing problems for me. Every time a cache file is deleted, gulp fires of the lint-scss task, resulting in an Input file did not exist or was not readable error.

Update:
Ok, it looks like the error is being caused by the gulp.src() that leads off the lint-scss task, rather than the watch itself. the lint-scss task uses the same 'some-dir/**/*.scss' glob that is passed to gulp.watch, and the inclusion of the cache files in that stream seams to be what is causing the error.

Cache files being included in the gulp.watch glob is also problematic, however, as changes to cache files are trigger additional, redundant executions of the lint-scss task.

I am currently using gulp-cached with typescript so that I can speed up the compilation of my code.

However the index of my application references a dts.d.ts file, which is the source definitions for the compiler. And since this file never changes, it is never processed by gulp-cached, which causes the compiler to break down and not work.

Now I could add a reference to my dts.d.ts file in every single one of my source files, but that is tedious and annoying. So I currently use a hacky way to always process the definition file.

var cache = $.cached.caches['compile-typescript'];
 if (cache) {
   delete cache[''typings/dts.d.ts']
 }

It works, but It would be nice if I could just pass that file to gulp-cached so it will always allow it through.

The problem:
gulp.src is excluding .html files with an underline at the beginning, therefore changes made in the underlined files are not getting cached.

My code:

var cache = require('gulp-cached');
gulp.task('html', function() {
  return gulp.src('app/templates/**/!(_)*.html')
    .pipe(cache('process-html'))
    .pipe(gulp.dest('.tmp'));
});

How can I tell gulp-cached to cache the underlined files too?

Thanks in advance.

gulp-util is not required, so it is not being installed and the code, that is left behind, is causig error.

The fix is easy - just remove these two lines:
https://github.com/wearefractal/gulp-cached/blob/master/index.js#L2-L3

When saving to dest only files processed there are empty directories being created as well, totally reflecting src directory structure: http://stackoverflow.com/a/33689435/5274538

I want to use gulp-imagemin which is a very slow and processor intensive task and I am working in a team environment using Git. How can I make sure that an image is only ever processed once in my entire team? Where does gulp-changed-in-place save it's change log? Can it be checked-in to Git?

Currently, when I run my gulp watch task, everything is linted on the first save.
The second time around, only the file I changed gets linted.

My question: Is there a way to enable some sort of init value? I want to cache all my javascript files the first time around if the cache is empty, but NOT lint at all. after that, start my piping and only the changed file will be linted

I'm not very sure what's the use case scenario and possible advantages of using this Gulp task; could we have more explanations or examples on this?

Hi, I am trying to configure gulp-cached in my streams, but code injection of Browser Sync not works.

This is my code:

gulp.task(config.css.task, function () {
	return gulp.src(config.css.source)
	.pipe(cache('css'))
	.pipe(sass(config.css.plugin.sass))
	.pipe(postcss(config.css.plugin.postcss))
	.pipe(gulp.dest(config.css.dist))
	.pipe(browserSync.stream());
});

Is not compatible with this feature? or do I have a bad configuration?

Not sure if this is the right place to log this or not. Sorry if it is not.

Currently gulp-cached and gulp-typescript cannot work together if you are using global variables or functions. While obviously that is not ideal in a JS project, it is the reality of many legacy applications.

I am currently converting a JS proj to TS. It has ~35 JS files which are included into their respective html files as needed. I have converted each js file into .ts and have it compiling them into .js using gulp-typescript. However the watcher takes ~11s to run due to the size and amount of files. gulp-cached is the ideal fix for this. However.

When gulp-cached filters out the unchanged files from the file list and passes the changed files onto gulp-typescript, gulp-typescript then errors because the global functions/variables don't exist within the set of files currently being compiled.

There needs to be a way that gulp-typescript can access the cache of files to ensure the currently being compiled files dont error when combined with the cached files (excluding the file being compiled).

Hope this makes sense.

Hello,

I'm testing gulp-cached for my imagemin task :

gulp.task('img', function () {
  return gulp.src(source + imgFiles)
    .pipe(cache('images'))
    .pipe(plugins.imagemin({
      svgoPlugins: [{
        removeViewBox: false
      }, {
        cleanupIDs: false
      }]
    }))
    .pipe(gulp.dest(destination + 'assets/'));
});

I'm testing with 2 png files.

Each time I run the task, every files is optimised :

gulp-imagemin: Minified 2 images (saved 27.44 kB - 44.5%)

Is there a problem with my task ?

When using gulp-load-tasks, I get this error:

Object #<Object> has no method 'cached'

With the example from the homepage, the task looks like this:

gulp.task('lint', function(){
  return gulp.src(dir.src + '/scripts/**')
    .pipe(task.cached('linting'))
    .pipe(task.jshint())
    .pipe(task.jshint.reporter())
});

Cheers!

Caching doesn't seem to be working in my setup, perhaps I'm just missing something. Here is what I have:

gulp.task('svgmin', function() {
    return gulp.src('src/images/**/*.svg')
        .pipe(cached('svgmin'))
        .pipe(svgmin())
        .pipe(gulp.dest('dist/images'))
});

Each time the task runs, it look to minify the SVGs despite already being minified. I tried the same with linting (as the example from the readme), and it lints each file, even without a change.

Versions of everything are all up-to-date.

Cheers!

Hello, i recently changed from gulp-cached to gulp-changed, and since then, i haven't seen any seg fault errors. I use it for production to copy files from dev to production, images, and scss tasks. its a couple hundred files. I just wanted to let you know.

I have an images task that pipes/minifies etc to an images folder along with automated image optimization. I was experiencing a performance problem where if I only changed/deleted/added 1 image, the entire library would upload. I switched from gulp-changed to gulp-cached which is looking promising, but there is one catch...it seems my cache clears every time I terminate and restart my gulp watch task.

FWIW my code/task looks like this:

var imagesTask = function() {
  var flyoutResizeFilter = gulpFilter('**/*/accessories-*png', {restore: true});
  return gulp.src(paths.src)
     // below used to be .pipe(changed(paths.dest))
     .pipe(cached(paths.dest)) // Ignore unchanged images
     .pipe(imagemin({
       plugins: [
         imagemin.jpegtran(), imagemin.gifsicle(), imagemin.optipng({optimizationLevel:5}), imagemin.svgo()
       ],
       verbose: true,
     }))
    .pipe(flyoutResizeFilter)
    .pipe(imageResize({
      height: 135
    }))
    .pipe(flyoutResizeFilter.restore)
    .pipe(rename({
      prefix: 'images-'
    }))
    .pipe(gulp.dest(paths.dest))
}

If I add an image, the entire library uploads - once that is done if another image is changed or added it behaves as expected. So this is more of a 2 part question:

1. Does the cache clear every time a gulp process is terminated?
2. If so is there a way to preserve it after termination?