I'm using the Gulp to build my SCSS, Pug and ES6 assets for my static website. I know it's possible to hash file names and output the files in a different directory.
For my specific example:
my Pug markdown are found in the ~/src/pages directory and getting built to the ~/public/ directory.
My SCSS stylesheets are found in the ~/src/stylesheets directory. These are getting built to the and getting ~/public/style directory
My problem is, when I'm referring to my stylesheets files from Pug, I have to refer to the already-built folder like this:
link(rel='stylesheet', href='./style/example.css')
For my IDE, this doesn't make sense, because the style directory doesn't exist in the ~/src/pages directory.
What I would find the most useful is that I can refer to my stylesheets like the example below:
link(rel='stylesheet', href='../stylesheets/example.scss')
Is there any way this is possible or am I completely going in the wrong direction? If not, where am I looking for?
Solution to make the file name like hash
gulp, for automating our task
gulp-rev, for renaming our files with random hashes.
gulp-rev-collector, for switching non-hashed references by hashed-references inside our files.
rev-del, for deleting non-hashed files in our /dist folder.
Sample code :
gulpfile.js
gulp.task("revision:rename", ["serve"], () =>
gulp.src(["dist/**/*.html",
"dist/**/*.css",
"dist/**/*.js",
"dist/**/*.{jpg,png,jpeg,gif,svg}"])
.pipe(rev())
.pipe(revdel())
.pipe(gulp.dest("dist"))
.pipe(rev.manifest({ path: "manifest.json" }))
.pipe(gulp.dest("dist"))
);
manifest.json
{
style.css: style-ds9udjvci.css,
main.js: main-dijds9xc9.min.js
}
For creating our revision update in the file like
Rewrite every reference for every key of manifest.json to it’s respective value inside every html/json/css/js file (i.e: <link href="style.css"> would become <link href="style-ds9udjvci.css">)
gulp.task("revision:updateReferences", ["serve", "revision:rename"], () =>
gulp.src(["dist/manifest.json","dist/**/*.{html,json,css,js}"])
.pipe(collect())
.pipe(gulp.dest("dist"))
);
You can use something like gulp-watch for real-time compiling of your .scss files, then your /style/example.css file will exist and it will be recompiled automatically when you modify example.scss
You may need to move some directories around to get everything to link, but you can use watch to build your Pug files too, so your site will always be up to date.
Basically, you make a change on any file in your project and view the update live.
Gulp cannot automatically change the file paths used inside the htmls. Therefore you will have to use the generated file path for accessing the style files.
Although if you want to have the file path as the folder structure of your scss, then you will have to replace the contents of the pug file after gulp has finished converting it to HTML.
You can convert the html to String and use the .replace method to replace whatever content you want to change and finally parse the string to a HTML document.
Hope this helps!!
I have the following Gulpfile.js: http://pastebin.com/khEF08GC
When generating the "sass" task, the Gulp creates .css files for each of .scss, I would like it to generate one file based only on the file "style.scss" which is where the #import.
But it happens whenever there are changes in any of the directory _sass.
I have used this solution, specifing each .scss final file and editing watch task.
Example usage:
Task: Using gulp-inject to inject js/**/*.js files into index.html.
Problem: If I watch for changes in the js/**/*.js glob, this would mean that I'm running the inject task each time any of the .js files' content is changed, which is unnecessary, since the paths don't change.
Question: How can I create a watcher that would only watch for addition/removal of the files in the glob?
Thanks!
You can give watch a callback function that gets the file object, including the type of event:
add - file was added to watch or created
change - file was changed
unlink - file was deleted
see https://www.npmjs.com/package/gulp-watch
I'm using PhpStorm with Live Edit.
Problem is that it's not updating when I change less files.
My less files are compiled to css by gulp.
I don't want to use File Watcher because it compiles all less files and I need to compile only one file app.less and watch all less files. I know how to do it with gulp but not how to do it with File Watchers.
Is there a solution that Live Edit will watch less or css files without edit?
I had the same issue with compiling scss files using gulp, namely the files in the IDE don't auto-update if they're changed via a task fired from a gulp.watch process (glitch dunno what jetbrains is doing about it).
There are 2 ways to get the files to update within the IDE:
File > Synchronize
Manually collapse and expand the tree in the project view
My hacky way to solve this problem is to macro the save process in phpstorm i.e.
Start macro record
File > Save All
File > Synchronize
File > Synchronize
File > Synchronize
Stop macro record
The Synchronize functionality is a little glitchy but i've found doing it 2 or 3 times inside the macro seems to work.
You can then rebind ctrl + s to your new macro and it should work.
I currently use gulp for most of my automation tasks. To keep the process optimised I check for file changes before processing the file. The problem is that when I rebuild my files and only a single file in the set has changed, the concat file only includes the changed file. Is there a way to pickup all the files in case of concat
gulp.task('myScripts', function() {
return gulp.src(['public/js/one.js','public/js/two.js'], {base: 'public/js'})
.pipe(changed('public/dist/original/js'))
.pipe(gulp.dest('public/dist/original/js'))
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest('public/dist/js'));
});
I am using gulp-changed to check for file changes, Here are the scenarios:
When running it for the first time, it takes both the miles and minifies them.
When only one file is changed after that, the concatenated file 'all.min.js' only contains the minified version of the changed file.
Can anyone please help me with how I can concat all the files even if only one file changes?
You should require gulp-remember and call it before concat. Gulp-remember works with gulp-changed and restores the previous changed files into the stream.
Have a look to this official recipe: Incremental rebuilding, including operating on full file sets