I'm trying to watch my #imported scss files, but for some reason it stopped working. Can't remember changing anything:
var gulp = require('gulp');
var sass = require('gulp-sass');
//style paths
var sassFiles = 'assets/css/scss/styles.scss',
cssDest = 'assets/css/';
gulp.task('styles', function(){
gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
});
gulp.task('watch',function() {
gulp.watch(sassFiles,['styles']);
});
My styles.scss:
#import
"fonts.scss",
"basics.scss",
"home.scss";
Whenever I change something in home.scss, I want it to watch, but it only watches styles.scss. Makes sense to me, but it used to work it the beginning..
From documentation
gulp.watch(glob[, opts], tasks)
A single glob or array of globs that indicate which files to watch
for changes.
You watch only that files which are in sassFiles. You can change this line in such way
var sassFiles = 'assets/css/scss/**.scss',
or
var sassFiles = ['assets/css/scss/styles.scss',
'assets/css/scss/fonts.scss','assets/css/scss/basics.scss',
'assets/css/scss/home.scss'],
And all scss-files in folder assets/css/scss/ will be watched.
If you would like to watch files by dependencies (#import) it is better to use webpack
Related
I am new to gulp so i don't know as much good gulp plugins. I wrote a code for minifying js, css and html using gulp and its plugins which is working fine. But now i am stuck in unminifying code. I don't know which plugins to use which can easily unminify code.
guplfile.js:
var gulp = require('gulp'),
uglify = require('gulp-uglify')
htmlmin = require('gulp-html-minifier')
csso = require('gulp-csso');
gulp.task('min_js', function () {
gulp.src('app/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('min'))
});
gulp.task('min_html', function () {
gulp.src('app/**/*.html')
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('min'))
});
gulp.task('min_css', function () {
gulp.src('app/**/*.css')
.pipe(csso())
.pipe(gulp.dest('min'))
});
gulp.task('minify_all', ['min_js', 'min_html', 'min_css']);
//pending
//gulp.task('unminify',[]);
Uglifying/Minifying is attended for production, you should not uglify your code while you are developing (except for testing purpose).
When you start gulp tasks, you have to make sure that you have in one part your "working code", that you will transform into a "destination code".
When you are doing this :
gulp.task('min_js', function () {
gulp.src('app/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('min'))
});
The code on which you are working on is in the app folder, and your transformed code is in the min folder (it's the destination folder).
But, if the min directory is also used in development, just disable the uglify task in development (easier to debug a not-uglifyied file).
There is no need to un-minify your sources, there are still present in app folder.
I'm trying to use these two gulp plugins together:
gulp-html-minifier
gulp-inject-stringified-html
Or put differently, I'm trying to inject the contents of files containing html fragments into my javascript files after they're minified.
When I'm trying to run a straight up gulp build I get this:
Error: ENOENT: no such file or directory, open 'C:\path\to\.temp\template.html'
Here's a repro of my situation. My folder structure:
/src/app.js
/src/template.html
/gulpfile.js
/package.json
My gulpfile.js:
var gulp = require('gulp');
var injectHtml = require('gulp-inject-stringified-html');
var htmlmin = require('gulp-html-minifier');
gulp.task('minify', [], function() {
gulp.src('src/*.html')
.pipe(htmlmin())
.pipe(gulp.dest('.temp'));
});
gulp.task('default', ['minify'], function() {
gulp.src('src/*.js')
.pipe(injectHtml())
.pipe(gulp.dest('.build'));
});
The template.html file:
<div>My Template</div>
The app.js file:
var html = { gulp_inject: "../.temp/template.html" };
Now, if I run minify manually first, things will work as expected. From this I speculate I'm not using Gulp correctly. I reckon I'd need to pipe the result of htmlmin into the injectHtml method. But I fail to see how.
How can I get these two plugins to play together nicely?
You are missing a return in the minify task. It should look like that:
gulp.task('minify', [], function() {
return gulp.src('src/*.html')
.pipe(htmlmin())
.pipe(gulp.dest('.temp'));
});
Without return, the default task doesn't have any way to know that minify finished, so it may start before the minified html file was created.
I've got liveReload working fine with scss and js, but not with html. here are my tasks...
var gulp = require('gulp'),
liveReload = require('gulp-livereload');
gulp.task('watchFiles', function () {
liveReload.listen();
gulp.watch('src/**/*.scss', ['compileSass']);
gulp.watch('src/**/*.html', ['watchHtmlFiles']);
gulp.watch('src/**/*.js', ['bundle-app']);
});
I needed to use run-sequence to assure my templates were built before bundling..and replaceIndex is a simple pipe for index.html over from 'src' to 'dist'
var gulp = require('gulp'),
runSequence = require('run-sequence'),
liveReload = require('gulp-livereload');
gulp.task('watchHtmlFiles', function (callback) {
runSequence('templates', 'bundle-app', 'replaceIndex', callback);
});
I get an error if I include ".pipe(liveReload())" as part of the callback...so I added it to the bundle-app and replaceIndex tasks. But this doesn't work....
this is now working, with no additional changes! The only thing I can attribute this sudden shift is that I was running another angular project with karma running. When that was shut down, live Reload for html files works fine....
I have a gulp watch task:
gulp.watch([
basePath+'/css/**/*.css'
], ['css']);
This task listens to changes of css files and starts the "css" task.
The css task, uses browserSync to stream the changes:
var gulp = require('gulp'),
browserSync = require('browser-sync');
gulp.task('css', function() {
return gulp.src(basePath+'/css/**/*.css', {'read': false})
.pipe(browserSync.stream());
});
The problem is, when I change only 1 css file, browserSync see's all the css files in the folder (due to gulp.src) and, using web-sockets, streams the changes in the browser for all the files.
[BS] 3 files changed (custom.css, custom2.css, main.css)
This happens even if I change only custom2.css
Now, the question:
How to filter the gulp watch, or CSS task, in order to let browserSync stream only the actual modified files? and not all of them...
Any ideas?
You can invoke gulp.watch() with a glob and callback and use the event passed to the callback to know exactly which css file changed.
gulp.watch(basePath+'/css/**/*.css', function(event) {
gulp.src(event.path, {read: false})
.pipe(browserSync.stream());
});
After changing your watch to this, the css task in your example wouldn't be needed.
I use gulp-react to compile jsx to js. I need to save folder structure while compiling.
The code below works good for single folder of all files, but I need dumanic destination
var gulp = require('gulp');
var react = require('gulp-react');
gulp.task('default', function () {
return gulp.src('template.jsx')
.pipe(react())
.pipe(gulp.dest('dist')); // in this line need dumanic destination
});
Any Ideas?
Problem solved like this
gulp.src('./public/js/**/.')