dragory / gulp-hash Goto Github PK

Hello, i read your complete documentation on the plugin. And i got half of it working, since i get the hashed names. The only problem is that from reading your documentation i can't understand how to call the hashed file from my HTML. Could you elaborate an example on how to call the file on your documentation please?

Do i have to put <%= name %>-<%= hash %><%= ext %> on my HTML and that will convert to the name.hashed.extention or what? cause i already tried and its not working.

hello, may be you can lint your code by eslint, there are many style problem.

and

hash.manifest function design has a problem, why not fs.readFileSync(dest + manifestPath, {encoding: 'utf8'}); in line 74.

We need some version options to use it in md5(content + version), like it Rails does.

It is useful, for example, when you fix webserver headers and you need to reload all assets.

I'm trying to create a content based hash but the one generated on my local machine is not the same as on my staging server or any other machine. I want it to be consistent and machine independent.

Hello,

I really like your plugin and hashOptions and easy way to change manifestPath file are really nice, but I have some difficulties appending manifest file.

I have read your example-gulpfile.js, but as I can see, it's not applicable in my case.

gulp.task('css', function () {
    build.css.forEach(function(group){
        Object.getOwnPropertyNames(group).forEach(function(group_file_path, index, array) {
            var assets = group[group_file_path];

            gulp.src(assets)
                .pipe(concat(group_file_path))
                .pipe(hash(hashOptions))
                .pipe(gulp.dest('.'))
        });
    });
});

My JSON looks like

{
    "css": [
        {
            "css/app.css": [
                "css/a1.css",
                "css/a2.css",
            ]
        },
        {
            "css/app2.css": [
                "css/b1.css",
                "css/b2.css"
            ]
        }
    ]
}

I would like to write all manifest data to one file, but file gets overwritten at every iteration.

Do you have some ideas / suggestions how to do this nicely?

I have multiple tasks in my hash file and after the whole pipeline is run through all of my different hash files for the different tasks have the data accumulated.
As a result I have the css in its own hash file, the js hash file also has the css inside, the videos hash file includes the css, js and videos and the images have all of them inside.

My code for one task looks like this

gulp.task("videos", function () {
    del(["static/videos/**/*"]);
    gulp.src("src/videos/**/*")
        .pipe(hash())
        .pipe(gulp.dest("static/videos"))
        //Create a hash map
        .pipe(hash.manifest("hash.json"))
        //Put the map in the data directory
        .pipe(gulp.dest("data/videos"));
})

Can I kind of clean the hash pipeline between tasks so the different hash files contain only certain hashes?

I was looking to use gulp-hash to hash my javascript assets that are being generated by webpack. However, one problem I am running into is that the javascript asset and the source map are hashed independently from each other. As a result, I have a files like

dashboard-5b67c76a.js
dashboard.js-983502f2.map

and of course my Chrome dev tools can't find the source map for my file, because the map file has different file name.

Is there a known solution for this? I have looked around and could find none.

I started looking into the possibility of hashing all of the files in the pipe together, rather than separately, and then applying the same hash to all, as a solution to this issue. However, it's new code to me and will take some time, so I'd like to see if there is an existing solution before I dive further into attempting this. Thanks!

I have one CSS file with the hash file name. I want to change the hash name every time when I run the gulp task.
Can we do that?
If it is there, Kindly help me to how to do that.

Thanks
Srikanth Chitla.

Just updated my npm packages. The problem now is that the assets.json file just gets overwritten each time hash.manifest is called. Here's my code:

// Concatenate all js files into one file
gulp.task('concat-js', function(){  
  var vendorScripts = gulp.src(dest(paths.scripts.vendor));
  var appScripts = gulp.src(dest(convertCoffeeFileName(paths.scripts.coffee)));
  var appTemplates = gulp.src(dest('templates.js'));

  return series(vendorScripts, appScripts, appTemplates)
  .pipe(uglify())
  .pipe(concat(paths.scripts.outputFileName))
  .pipe(hash())
  .pipe(gulp.dest(paths.dest)) // write concatenated file
  .pipe(hash.manifest(paths.assetsManifest))
  .pipe(gulp.dest(paths.dest)); // write assets manifest file
});


// Concatenate all css files into one file
gulp.task('concat-css', function(){    
  var vendorStyles = gulp.src(dest(paths.styles.app.vendor));
  var fontsStyles = gulp.src(dest(paths.styles.app.fonts));
  var appStyles = gulp.src(dest(convertLessFileName(paths.styles.app.less.main)));

  return series(vendorStyles, fontsStyles, appStyles)
  .pipe(cleanCss({keepSpecialComments: 0}))
  .pipe(concat(paths.styles.app.outputFileName))
  .pipe(hash(hashOptions))
  .pipe(gulp.dest(paths.dest)) // write concatenated file
  .pipe(hash.manifest(paths.assetsManifest))
  .pipe(gulp.dest(paths.dest)); // write assets manifest file
});

This code results in assets.json looking like so: the last call overrides the first call. The file should contain 2 lines but only has one:

{"styles.css":"styles.407f6229.css"}

I tried adding {append: true} as the 2nd parameter even thought it's true by default. Doesn't help. am I doing something wrong? Thanks

Hi,

I tried various things but I keep getting the same hashing values when running the hash() task. Even when changing the algorithm to sha256 or sha512 I get the same value.. I checked my gulp task a few times but can't seem to resolve the issue.

Running the task 1, 2, 3, 4 times always gives me the same hashing values (even in the manifest)

gulp.task('hashjs', ['bundlejs'], function() { gulp.src('../export/js/bundle.min.js') .pipe(hash()) .pipe(gulp.dest('../export/js')) .pipe(hash.manifest('assets.json')) .pipe(gulp.dest('./hashmanifest')); });

HI,

for debug reasons i generate a file with and without sourcemap through gulp. So that when i for whatever reason in production need to debug i can enable the sourcemaps by adding a certain URL param.

Now is there for me a way to lets say add an array of locations where to look for old files when i want to delete the old files?

This is my setup now

gulp-hash.manifest(buildConfig.manifest.path + buildConfig.manifest.name, {
    deleteOld: true,
    sourceDir: __dirname + '/build'
})

But i would like to be able to do something like this:

gulp-hash.manifest(buildConfig.manifest.path + buildConfig.manifest.name, {
    deleteOld: true,
    sourceDir: [__dirname + '/build', __dirname + '/build/debug']
})

This way the old files will be deleted out of 2 folders.

Anyway i can achieve this right now?

It would be great if this plugin could be added to the list of those that support sourcemaps.

Sourcemap instructions to other plugin developers

Hi, I can't seem to get deleteOld to work. I've set up a basic folder to test this out, and used virtually the same code as the example in the docs:

var gulp = require('gulp');
var hash = require('gulp-hash');

gulp.task('js', function () {
  return gulp.src('./js/**/*.js')
    .pipe(hash()) 
    .pipe(gulp.dest('public/js')) 
    .pipe(hash.manifest('assets.json', {
      deleteOld: true,
      sourceDir: __dirname + '/public/js'
    })) 
    .pipe(gulp.dest('public')); 
});

The manifest gets updated and it adds the newly generated file, but the old one sticks around.
Am I doing something wrong or is this just not working? Thanks!

Just an FYI, that npmjs.com is still publishing your older 2.0.4 version and does not offer your great 2.1.0 version.

gulp-hash mivir
A gulp plugin for cachebusting files by adding a hash to their name and/or content. Optionally writes a JSON file with mappings from the original filename to the renamed one.
1 v2.0.4
cache, cachebust, cache bust, gulpplugin

Hello,
I tried to Hash my JavaScript Files. That works fine, but when I set some Options (e.g. the Options in the example Gulp-File) they are ignored.

My Code:

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

var hashOptions = {
  algorithm: 'sha1',
  hashLength: 40,
  template: '<%= name %><%= ext %>?<%= hash %>'
};

  var appStream = gulp.src('src/app/**/*.js')
    .pipe($.hash(hashOptions))
    .pipe($.using());

When I run this the Output from "using" is:

[gulp] Using file ./src/app/example-3ab30129.js

But the Hash should have a length of 40 and should be on a other Place

Greetz

Hello.

When using "buffer: false" gulp option I will get a stream instead of a buffer in 'file.contents' but the copied file will have 0KB

example:

gulp.src(PATH/TO/FILE, {
      buffer: false
    })
    .pipe(gulp.dest(OUTPUT/PATH)) //500 kb size file

gulp.src(PATH/TO/FILE, {
      buffer: false
    })
    .pipe(hash())
    .pipe(gulp.dest(OUTPUT/PATH)) //0 kb size file

I run into error with gulp 4.

TypeError: file.pipe is not a function (gulp-hash\index.js:30:20)

Solution:
https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

Hey, this plugin is great and exactly what I needed, many thanks!

Would be great to be able to have similar functionality to https://github.com/danethurber/webpack-manifest-plugin#optionsbasepath

I'm finding myself needing to append the manifest key and values at load time to add the path at present.

I have this gulpfile config:

const autoprefixer = require('autoprefixer')
const babel = require('gulp-babel')
const clean = require('gulp-clean')
const concat = require('gulp-concat')
const cssnano = require('gulp-cssnano')
const data = require('gulp-data')
const ghPages = require('gulp-gh-pages')
const gulp = require('gulp')
const hash = require('gulp-hash')
const imagemin = require('gulp-imagemin')
const jsmin = require('gulp-jsmin')
const mergeJson = require('merge-json')
const postcss = require('gulp-postcss')
const postImport = require('postcss-import')
const pug = require('gulp-pug')
const rename = require('gulp-rename')
const sequence = require('gulp-sequence')
const sourceMaps = require('gulp-sourcemaps')


const DEST_FOLDER = 'dist/'
const MANIFEST_CONFIG = {
	_manifestName: 'assets.json',
	manifestPath() {
		return `../src/data/${this._manifestName}`
	},
	options: {
		append: true
	}
}

gulp.task('build', ['clean'], callback =>
	sequence(['css', 'js', 'pug', 'image'], 'copy-files')(callback))

gulp.task('clean', () => {
	return gulp.src('dist/')
		.pipe(clean())
})

gulp.task('copy-files', () => {
	return gulp.src('src/CNAME')
		.pipe(gulp.dest('dist/'))
})

gulp.task('css', () => {
	console.log(MANIFEST_CONFIG)
	gulp.src('src/css/index.css')
		.pipe(sourceMaps.init())
		.pipe(postcss([autoprefixer(), postImport()]))
		.pipe(cssnano())
		.pipe(rename({
			suffix: '.min'
		}))
		.pipe(sourceMaps.write('.'))
		.pipe(hash())
		.pipe(gulp.dest(DEST_FOLDER))
		.pipe(hash.manifest(MANIFEST_CONFIG.manifestPath(), MANIFEST_CONFIG.options))
		.pipe(gulp.dest(DEST_FOLDER))
})

gulp.task('deploy', sequence('build', 'pages'))

gulp.task('image', () => {
	return gulp.src('src/img/**/*')
		.pipe(imagemin())
		.pipe(gulp.dest('dist/img/'))
})

gulp.task('js', () => {

	return gulp.src(['./src/js/vendor/smooths-scroll.min.js',
			'./src/js/index.js'
		])
		.pipe(sourceMaps.init())
		.pipe(babel())
		.pipe(jsmin())
		.pipe(concat('index.min.js'))
		.pipe(sourceMaps.write('.'))
		.pipe(hash())
		.pipe(gulp.dest(DEST_FOLDER))
		.pipe(hash.manifest(MANIFEST_CONFIG.manifestPath(), MANIFEST_CONFIG.options))
		.pipe(gulp.dest(DEST_FOLDER))
})

gulp.task('pages', () => {
	return gulp.src('dist/**/*')
		.pipe(ghPages())
})

gulp.task('pug', () => {
	return gulp.src('src/index.pug')
		.pipe(data(() => {
			let result = mergeJson.merge(require('./src/data/projects.json'),
				require('./src/data/about.json'))
			result = mergeJson.merge(result, require('./src/data/skills.json'))
			result.assets = require('./src/data/assets.json')
			return result
		}))
		.pipe(pug({}))
		.pipe(gulp.dest('dist/'))
})

gulp.task('watch', () => {
	gulp.watch('src/**/*.pug', ['pug'])
	gulp.watch('src/**/*.css', ['css'])
	gulp.watch('src/**/*.js', ['js'])
})

But pay attention on css and js tasks. When I run both tasks, the last one overwrite the manifest file and I can't have index.min.css and index.min.js in the same assets.json file.

Am I doing something wrong?