Im trying to get my head around Gulp and i am using.
Yeoman´s webapp
Im trying to add some css-files to the project and hopefully get it to end up in the dist/styles-folder.
When adding scss-files to my app/styles-folder and build the project, the files end up in a .tmp-folder. I suppose this is the task that does it:
gulp.task('styles', () => {
return gulp.src('app/styles/*.scss')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass.sync({
outputStyle: 'expanded',
precision: 10,
includePaths: ['.']
}).on('error', $.sass.logError))
.pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.tmp/styles'))
.pipe(reload({stream: true}));
});
The get compiled from scss to css which should be a good thing but how do I get them from the .tmp-folder tom my dist/index?
I tried: <link rel="stylesheet" href="./.tmp/styles/style.css">
It returned a 404 but even so, I cant imagine that this is the right way? Or swill my dist-folder have access to the .tmp-folder? Help appreciated.
Thanks
It seems you want to set the destination folder to dist, not tmp:
.pipe(gulp.dest('dist/styles'))
Related
I'm tryng to create a new gulp task to run into my application and look for all '.fragment.sass' files.
I wrote:
gulp.task('sassFragments', () => {
return gulp
.src('./src/**/*.fragment.sass')
.pipe(debug())
.pipe(sassGlob())
.pipe(sass({ outputStyle: 'expanded' })).on('error', sass.logError)
.pipe(concat('fragments_style.css'))
.pipe(gulp.dest('./build/assets/css'))
.pipe(browserSync.reload({ stream: true }));
})
but no fragments_style.css is created in /build/assets/css folder.
I have another task which does similar using src('./src/**/*.sass') to generate a style.css file and works great!
I think there is a issue with .src method, that is not matching this '.fragment.sass' pattern.
Can anyone help me?
Gulp version: 3.9.1
I don't know why the server still stops whenever there's an error in my js files even though I have jshint in my gulpfile. I installed jshint and included it in my project because it reports errors in js files, but it's still failing. How can I fix this?
gulp.task('scripts', () => {
return gulp.src('assets/js/src/*.js')
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish', {beep: true}))
.pipe(concat('main.js'))
.pipe(gulp.dest('assets/js/build/'))
.pipe(uglify())
.pipe(gulp.dest('assets/js/'))
.pipe(browserSync.stream({stream: true}));
});
gulp-jshint does what you says it does: it reports errors in JavaScript files. Nothing more, nothing less. It doesn't prevent defective JavaScript files from reaching later pipe stages like uglify() (which throws up and thus stops your server if there's any error in a JavaScript file).
If you want to prevent defective JavaScript files from wrecking your server, you need to put all the jshint stuff into it's own task and make sure that task fails when any JavaScript file has an error:
gulp.task('jshint', () => {
return gulp.src('assets/js/src/*.js')
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish', {beep: true}))
.pipe(jshint.reporter('fail'))
});
Then you need to make your scripts task depend on that jshint task:
gulp.task('scripts', ['jshint'], () => {
return gulp.src('assets/js/src/*.js')
.pipe(concat('main.js'))
.pipe(gulp.dest('assets/js/build/'))
.pipe(uglify())
.pipe(gulp.dest('assets/js/'))
.pipe(browserSync.stream({stream: true}));
});
Now your scripts task will only run when the jshint task was successful. If any JavaScript file was defective jshint will output the error to the console while your server continues to run using the last good version of your JavaScript.
The simplest fix would be to use gulp-plumber to handle the error a little more gracefully:
var plumber = require("gulp-plumber");
gulp.task('scripts', () => {
return gulp.src('assets/js/src/*.js')
.pipe(plumber())
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish', {beep: true}))
.pipe(concat('main.js'))
.pipe(gulp.dest('assets/js/build/'))
.pipe(uglify())
.pipe(gulp.dest('assets/js/'))
.pipe(browserSync.stream({stream: true}));
});
Personally, I don't like that solution because it will prevent your minified file from being updated. Here's what I would recommend:
var jshintSuccess = function (file) {
return file.jshint.success;
}
gulp.task('scripts', () => {
return gulp.src('assets/js/src/*.js')
.pipe(sourcemaps.init())
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish', {
beep: true
}))
.pipe(gulpif(jshintSuccess, uglify()))
.pipe(concat('main.js'))
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest('assets/js/'))
.pipe(browserSync.stream({
stream: true
}));
});
First, notice that I'm not writing to multiple destinations. Instead, I'm using sourcemaps so that you don't need unminified code. Second, I'm using gulp-if to conditionally pipe your code through uglify based on the results of jshint. Code with errors will bypass uglify so that it still makes it into to your destination file.
Now, you can inspect and debug it with the developer tools.
Note: I recommend this for local development only. I wouldn't connect this to a continuous integration pipeline because you'll only want good code to make it into production. Either set up a different task for that or add another gulp-if condition to prevent broken code from building based on environment variables.
Trying to implement sass sourcemaps but for some reason it doesn't seem to be playing nice for sub folders. For example, below is the main.scss file that gets compiled:
#import 'test';
#import 'test1';
#import 'test2';
#import 'test3';
#import 'sub/test4';
The changes show up (using BrowserSync) and compile with no issues. However inspecting the code in dev tools. It does not seem to reference the last import, it references 'test3' instead. See screenshot Dev Tools Screen Shot
The sass file 'sub/test4' contains the salmon color for the body but the source map is saying that this is contained in the file 'test3'.
See below for the styles task that I am using:
gulp.task('styles', function(){
return gulp.src('assets/scss/**/*.scss')
.pipe(plumber({
errorHandler: function(err){
this.emit('end');
}
}))
.pipe(scssLint({ customReport: scssLintStylish }))
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'compressed', errLogToConsole: true}))
.on('error', notify.onError({ message: 'SASS Compile Fail'}))
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('assets/css'))
.pipe(uglifycss())
.pipe(browserSync.stream({match: '**/*.css'}));
});
Tried various different things but nothing seems to work at all. Any help greatly appreciated!
I've just setup the following Gulp task for SASS, using gulp-autoprefixer which causing a problem handling font-awesome icon "content".
The way it works (without gulp-autoprefixer)
gulp.task('sass', function() {
gulp.src(['./src/vendor/style.scss',
'./src/app/style.scss'])
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(concat('style.css'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./public/css'));
});
That works fine and it outputs the result I expect.
An example of the user-icon (without gulp-autoprefixer):
.fa-user:before {
content: "";
}
The way it breaks (with gulp-autoprefixer)
If I now add autoprefixer to this task - like:
gulp.task('sass', function() {
gulp.src(['./src/vendor/style.scss',
'./src/app/style.scss'])
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(concat('style.css'))
.pipe(prefix({
browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1'],
cascade: false
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./public/css'));
});
The output breaks now. This is what I get for fa-user (with gulp-autoprefixer):
.fa-user:before {
content: "";
}
It seems like there is a problem with the charset (UTF-8 / UTF-16).
Is there any possibility to avoid that behaviour with gulp-autoprefixer?
Well, even it was a strange behavior (because it worked well without the gulp-autoprefixer), the solution was easier than I thought.
I've missed to add the UTF-8 charset meta-tag in the documents <HEAD>.
So this tag fixed it:
<meta charset="UTF-8">
I also came across this issue, changing the order of the sass compiler and prefixer fixed it for me. Prefixer first, then sass compiler:
.pipe(
autoprefixer({
browsers: ['> 1%', 'last 3 versions'],
cascade: false
})
)
.pipe(
sass({
outputStyle: 'compressed',
includePaths: []
}).on('error', error)
)
So I'm using gulp.js to manage and automate some tasks and I have a specific task styles that compiles my scss files into css and another to run a server using gulp-connect plugin that provides a livereload integration.
I also have a task watch to watch my changes and trigger the livereload.
gulp.task('watch', function () {
gulp.watch([ stylesPath + '/**/*.scss'], ['styles']);
gulp.watch([ scriptsPath + '/**/*.coffee'], ['scripts']);
gulp.watch([
'./app/**/*.html',
'./app/assets/scripts/**/*.js',
'./app/assets/styles/**/*.css'
], connect.reload);
});
This does not always works, actually it works less times than more. I really don't know why. I have the same logic with my .coffee files and it works perfectly for them.. but not to my css files.
Bellow are another related tasks.
gulp.task('connect', connect.server({
root: './app',
port: 1337,
livereload: true,
open: {
file: 'index.html',
browser: 'Google Chrome'
}
}));
gulp.task('styles', function () {
gulp.src('.sass-cache').pipe(clean({read:false}));
return gulp.src(stylesPath + '/**/*.scss')
.pipe(sass())
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest(stylesPath));
});
Actually it was an embarassing mistake of mine.
I included the stylesheet twice in my html file for mistake, for some reason this stopped livereload to work.
Frankly I don't see anything wrong with this.
It'd be best if you report this on Gulp github page. Might be some kind of bug. https://github.com/gulpjs/gulp