I need some help, I've butchered what I had working while trying to add scss compilation and minification. I had scss working, but it made main.js not uglify. Then I switched some things and both don't work. This is my second day in Gulp, let alone .js.
It's throwing an error on the line after the last line (which is blank?) and SyntaxError: Unexpected end of input.
Here's the code: (and thanks)
/* Required */
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
sass = require('gulp-sass');
/* Scripts Task */
gulp.task('scripts', function(){
gulp.src(['app/js/**/*.js', '!app/js/**/*min.js'])
.pipe(rename({suffix:'.min'}))
.pipe(uglify())
.pipe(gulp.dest('app/js'));
});
/* Watch Task */
gulp.task('watch', function(){
gulp.watch('app/js/**/*.js', ['scripts']);
gulp.watch('app/scss/**/*.scss', ['sass']);
});
/* Gulp-Sass Task */
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('app/css'));
});
gulp.task('sass:watch', function() {
gulp.watch('app/sass/**/*.scss', ['sass']);
/* Default Task */
gulp.task('default', ['scripts', 'sass', 'watch']);
PS: Is there a better way of minifying my code that combines js and scss compiling?
You should use gulp-scss instead, I saw this when i visited gulp-scss's page
I found gulp-sass, but it doesn't seem to support actual sass, because the backend, node-sass is a port of libsass that has major limitations.
Also for minifying css why shouldn't you use gulp-clean-css ?
Related
So I can compile scss to css fine.
However, whenever I change anything in my scss file it has no effect on the page unless I build styles.
My gulp file:
var gulp = require('gulp');
var sass = require('gulp-sass');
var concatCss = require('gulp-concat-css');
// Gulp watches
gulp.task('watch', function() {
gulp.watch('app/scss/**/*.scss', ['sass']); // Sass watch
// gulp.watch('dist/css/main.css');
});
// Sass compiler
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass()) // Convert Sass to CSS
.pipe(gulp.dest('app/css'))
});
// Compile css files
gulp.task('styles', function () {
return gulp.src('app/css/**/*.css')
.pipe(concatCss('main.css'))
.pipe(gulp.dest('dist/css'));
});
/** Default builds **/
// Build
gulp.task('build', ['styles']);
// Watch and build changes
gulp.task('default', ['build', 'watch']);
My index.html file linked to my dist css file is this correct also?
<link rel="stylesheet" type="text/css" href="dist/css/main.css">
All that keeps happening is I gulp watch files okay but if I change anything (something simple like body background colour) nothing happens. Not even on hard refresh. I have to gulp build styles. I am new to gulp/learning but surely building styles after every change cannot be right?
Thank you for any suggestions. I know I asked about compiling, I worked out why that wasn't working, but I've been going around in circles with this one.
I think what happens is that the watch task of gulp is only compiling the css from sass, but not concatenating the css in dist/css/main.css.
Add the task styles to the watch method of gulp and try again:
// Gulp watches
gulp.task('watch', function() {
gulp.watch('app/scss/**/*.scss', ['sass', 'styles']); // Sass watch
});
Hope this helps! :)
Link to Github Repo: https://github.com/janschloss/boilerplate
My problem is that only scss changes get recognized by BrowserSync in Gulp (no html or js or /img changes). I guess that is because scss changes are streamed directly. Weirdly I had one build which recognized html and img changes though I can't find that again.
Does someone see the mistake?
"use strict";
// Define packages
var gulp = require('gulp'),
sass = require('gulp-sass'),
clean = require('gulp-clean'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('gulp-autoprefixer'),
plumber = require('gulp-plumber'),
imagemin = require('gulp-imagemin'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
strip = require('gulp-strip-comments'),
browserSync = require('browser-sync');
// Define file paths
var scssSrc = 'src/scss/**/*.scss',
jsSrc = 'src/js/*.js',
htmlSrc = 'src/*.html',
imgSrc = 'src/img/*';
// BrowserSync config
gulp.task('browserSyncInit', function() {
browserSync.init({
server: {
baseDir: 'dist'
}
});
gulp.watch('./dist/*').on('change', browserSync.reload);
});
// Concat scss files, compile compressed to css, prefix css, strip comments and create sourcemap
gulp.task('sass', function() {
return gulp.src(scssSrc)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(concat('main.min.scss'))
.pipe(sass({outputStyle: 'compressed'}))
.pipe(autoprefixer())
.pipe(strip.text())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({
stream: true
}));
});
// Concatenate, uglify, strip comments and create sourcemap for js files
gulp.task('js', function() {
return gulp.src(jsSrc)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(concat('main.min.js'))
.pipe(uglify())
.pipe(strip())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/js'));
});
// Image optimization
gulp.task('img', function () {
return gulp.src(imgSrc)
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('dist/img'));
});
// Clean task
gulp.task('clean', function() {
return gulp.src('dist')
.pipe(clean());
});
// Copy html
gulp.task('copy', function() {
return gulp.src(htmlSrc)
.pipe(gulp.dest('dist/'));
});
// Default Task
gulp.task('default', ['clean', 'copy', 'sass', 'js', 'img', 'browserSyncInit'], function () { //todo asynchronous
gulp.watch(scssSrc, ['sass']);
gulp.watch(jsSrc, ['js']);
gulp.watch(imgSrc, ['img']);
gulp.watch(htmlSrc, ['copy']);
});
I think
gulp.watch('./dist/*').on('change', browserSync.reload);
is the relevant line. Is there anything wrong with my path?
My relevant folder structure looks like:
gulpfile.js
src
dist
Changes are made in src and copied over to dist on runtime with gulp.
Thanks!
I can't explain it. But when I remove your watch call from the browserSyncInit task and put it in the callback for the default task along side the other watches, everything works fine.
Relevant pieces of code:
// BrowserSync config
gulp.task('browserSyncInit', function() {
browserSync.init({
server: {
baseDir: 'dist'
}
});
});
// Default Task
gulp.task('default', ['clean', 'copy', 'sass', 'js', 'img', 'browserSyncInit'], function () { //todo asynchronous
gulp.watch(scssSrc, ['sass']);
gulp.watch(jsSrc, ['js']);
gulp.watch(imgSrc, ['img']);
gulp.watch(htmlSrc, ['copy']);
gulp.watch('./dist/**/*').on('change', function () {
console.log("Watch hit");
browserSync.reload();
});
});
Is this ideal at all for your gulp file? I can kind of understand the thinking of having the watch originally triggered inside the other task.
Very weird thing I noticed; Sometimes the DIST watch would take and all the other watches wouldn't. As if there is a race condition happening on which ones get registered and the others get overwritten. When they were separated like you had them originally, either SRC watches worked or DIST watches worked. I could edit files in DIST directly when the DIST watch was working and trigger reload.
Keeping all the watches together in that CB function works for me using your github project.
I also noticed another unrelated issue. Rerunning your gulp file required me to rm -rf dist first other wise I got errors.
I think the problem is with the glob: './dist/*' - it will only watch the contents of dist. I think you want './dist/**/*' to watch the folder and all subfolders.
my gulp watch tasks causes an infinite loop in the terminal and it also creates a a lot more .min.js files than expected. I'm pretty new to gulp and any help pointing me in the right direction would help
Here my gulpfile:
/*
Required
*/
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename');
/*
Scripts Task
*/
gulp.task('scripts', function(){
gulp.src(['app/js/**/*.js', '!app/js/**/*.min.js]'])
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('app/js'));
});
/*
Watch Tasks
*/
gulp.task('watch', function(){
gulp.watch('app/js/**/*.js', ['scripts']);
});
/*
Default Task
*/
gulp.task('default', ['scripts', 'watch']);
You're watching for changes in the js directory, and your scripts task also puts the processed code into the js directory, which the watcher picks up and the cycle begins all over again.
You should probably put the processed files in a different directory than the source files, by changing this line: .pipe(gulp.dest('build/js'));
The alternative is to change your watcher to not watch the files with .min.js at the end, but I can see this getting really messy
I've seen plenty of stackoverflow solutions to this, but none of the appear to work in my scenario.
My gulp watch appears to be watching the file but the output file is not being updated.
Running gulp works okay as it default is set to call the sass task, and the task successfully compiles my output css.
Here is my directory structure:
- css
- sass
* style.scss
* style.css
* gulpfile.js
and my gulpfile:
// include gulp
var gulp = require('gulp');
// include plugins
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var cssbeautify = require('gulp-cssbeautify');
var cssmin = require('gulp-cssmin');
// compile sass
gulp.task('sass', function () {
return gulp.src('./css/sass/*.scss')
.pipe(sass())
.pipe(cssbeautify())
.pipe(gulp.dest('css'));
});
// watch
gulp.task('watch', function () {
gulp.watch('./css/sass/*.scss', ['sass']);
});
// default task
gulp.task('default', ['sass']);
gulp watch gives me: (11:01 is when I saved the file)
[10:59:48] Using gulpfile ~/Sites/cla/8_0/web/intranet/reports/gulpfile.js
[10:59:48] Starting 'watch'...
[10:59:48] Finished 'watch' after 12 ms
[11:01:25] Starting 'sass'...
[11:01:25] Finished 'sass' after 24 ms
Any ideas as to why my output css isn't changing?
Many thanks!
It could be an sass synthax error issue, since you dont have any functionality in your sass taks no handle then.
Here is an example from my gulpfile
Try to add .on('error', sass.logError)), after your .pipe(sass()), here is a rough example:
gulp.task('sass',function(){
gulp.src('./src/sass/main.scss')
.pipe(sass().on('error', sass.logError))
});
Following this tutorial, I've setup a basic gulp config along with a .scss file that I want compiled into .css using gulp-sass. When I run gulp watch from the console, the watch task register fine, but nothing happens when I edit the .scss file, and I can't figure out why.
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
//style paths
var sassFiles = 'assets/styles/sass/**/*.scss',
cssDest = 'assets/styles/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']);
});
terminal output:
shooshte#M:~/Webpages/CV2$ gulp watch
[20:38:40] Using gulpfile ~/Webpages/CV2/gulpfile.js
[20:38:40] Starting 'watch'...
[20:38:40] Finished 'watch' after 5.37 ms
You were passing 'sassFiles' (as a string) and not the sassFiles variable.
gulp.task('watch', function() {
gulp.watch(sassFiles,['styles']); // Removed '' around sassFiles
});
I also noticed you are passing the sassFiles variable into your styles task. I'm a bit foggy but I don't think this works and further more It may, as suggested, indicate a poor directory structure.
The suggested methods for how to structure a sass project vary, but all share one common factor. They suggest breaking up your sass into partials prefixed with an underscore
/styles
application.scss
_footer.scss
_header.scss
_sidebar.scss
And then importing them all into a single top level scss file. application.scss
#import "footer";
#import "header";
#import "sidebar";
You can then just tell the styles task to compile application.scss and all of the files referenced as imports will get pulled in automatically.
gulp.task('styles', function(){
gulp.src('assets/styles/sass/application.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
});