I'm trying to get gulp to compile some sass, however I can't seem to get it to write out anything. I'm not seeing an error and using sass to compile myself is successful. Here is what my config looks like:
var sass = require('gulp-sass');
var baseOutputDir = '../publish/homepage';
var cssOutputDir = baseOutputDir + '/css';
gulp.task('sass', function () {
gulp.src(['./css-lib/Bootstrap/3.3.1/assets/stylesheets/_bootstrap.scss'])
.pipe(sass())
.on('error', function (err) { console.log(err.message); })
.pipe(gulp.dest(cssOutputDir));
})
The bootstrap is a clone of https://github.com/twbs/bootstrap-sass
I'm use to LESS and not Sass. A file with an underscore in front won't generate a css file.
I had the same problem. As #Steven pointed out _filename do not generate css files. Just rename/copy the _bootstrap.scss to something without leading underscore
gulp.src(['./css-lib/Bootstrap/3.3.1/assets/stylesheets/bootstrap.scss'])
Related
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
I have a gulp task to uglify my JS:
gulp.task('uglify', ['eslint'], () => {
return gulp.src(jsDest + '/*.js')
.pipe(rename({suffix: '.min'}))
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest(jsDest));
});
It works fine, but as I am using a wildcard to identify JS files, I end up with new files named name.min.min.js rather than existing minified files being overwritten.
A work around I have come up with is to have an additional task which cleans out these files before I uglify again:
gulp.task('cleanUglified', () => {
return del.sync('dist/js/*.min.js');
});
gulp.task('uglify', ['cleanUglified', 'eslint'], () => {
...
});
While this works fine, I'm sure there must be a way to have my task ignore anything named *.min* and in fact overwrite any that already exist.
Solved - I can ignore the already minified files and overwrite them by using this pattern to select the files to uglify:
return gulp.src(jsDest + '/*[^.min].js')
EDIT
Following the below comments, I have updated to:
return gulp.src(['*.js', '!*.min.js'])
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 want to remove comments, but not uglify the code. Is it possible with gulp? Or is this something that requires bower or something else?
Yes, it is possible. For future reference, you should be using the gulp plugin registry. Doing a quick search for 'comments' found this:
var gulp = require('gulp');
var strip = require('gulp-strip-comments');
gulp.task('default', function () {
return gulp.src('template.js')
.pipe(strip())
.pipe(gulp.dest('dist'));
});
https://github.com/RnbWd/gulp-strip-comments
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/**/.')