I have a gulp task to build css files from sass files as following:
gulp.task("sass", () => {
return (
gulp.src([
src_assets_folder + "sass/*.scss"
], {
since: gulp.lastRun("sass"),
})
.pipe(debug({title: "sass-debug:"}))
.pipe(sourcemaps.init())
.pipe(plumber({errorHandler: onError}))
.pipe(dependents())
.pipe(sass({ fiber: Fiber }))
.pipe(autoprefixer())
.pipe(minifyCss())
.pipe(sourcemaps.write("."))
.pipe(gulp.dest(dist_folder))
.pipe(browserSync.reload({ stream: true }))
);
});
gulp.watch([src_assets_folder + 'sass/**/*.scss'], gulp.series("sass"));
The sass files I'm building are the ones found immediately under sass folder and not all the files that are in the sass subfolders, but my watcher is on all the files inside the sass folder recursivly.
The problem I'm having is that when Browsersync is up, and then I update a sass file that is not found immediately under sass folder, Browsersync doesn't detect any changes, but when I update a sass file that is found immediately under sass folder, Browsersync detects the changes.
How can I solve that?
Finally I found a solution on how to fix my issue.
The idea is to include the partials in the task src and then filter them to prevent building them.
The final solution looks like this:
gulp.task("sass", () => {
const partials = readdirSync(src_sass_folder, { withFileTypes: true })
.filter(dirent => dirent.isDirectory())
.map(dirent => `!${src_sass_folder + dirent.name}/**/*.scss`);
return (
gulp.src([
src_sass_folder + "*.scss",
src_sass_folder + "**/*.scss"
], {
since: gulp.lastRun("sass"),
})
.pipe(dependents())
.pipe(filter(['**'].concat(partials))) // =====================> HERE
.pipe(debug({title: "sass-debug:", showCount: false}))
.pipe(sourcemaps.init())
.pipe(plumber({errorHandler: onError}))
.pipe(sass({ fiber: Fiber }))
.pipe(autoprefixer())
.pipe(minifyCss())
.pipe(sourcemaps.write("."))
.pipe(gulp.dest(dist_folder + "Content"))
.pipe(browserSync.stream({match: '**/*.css'}))
);
});
This seems to be related to the since option of src(). With that option enabled, that task doesn't create any Vinyl objects to pipe unless there are detectable changes in the files immediately under sass folder since the last time the task was run. Removing that option should fix the issue.
Related
I`m trying to create a valid Source Map with Gulp and gulp-sourcemaps. The Source Map is actually created, but inside, the "sources" parameter is not loading the appropriate paths of my SASS files. This is what I get:
"version":3,"file":"style.css","sources":["style.css"]
When I need to load something like this (created by Koala App):
"version":3,"file":"style.css","sources": ["../sass/style.scss","../sass/typography/_fonts.scss","../sass/helpers/_variables.scss"........
This is my Gulp Task
gulp.task('sass', function () {
return gulp.src('style/sass/**/*.scss')
.pipe(sass(
{
'outputStyle': 'expanded'
}
))
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.')
.pipe(gulp.dest('./style/css'))
.pipe(bs.reload({stream: true}));
});
Thanks for the time.
The sourcemaps.init() must go before the sass pipe, so:
gulp.task('sass', function () {
return gulp.src('style/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass( {
'outputStyle': 'expanded'
}).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./style/css'))
.pipe(bs.reload({stream: true}));
});
See gulp-sass with sourcemaps.
You have two sass calls for some reason, get rid of the first and put its options into the second sass pipe call.
I have downloaded AngularJS setup for PhoneGap from this tutorial.
Now I would like to use Sass instead of Less (since that's what I'm using in the project I am porting to PhoneGap). The default Less task looks like this:
gulp.task('less', function () {
return gulp.src(config.less.src).pipe(less({
paths: config.less.paths.map(function(p){
return path.resolve(__dirname, p);
})
}))
.pipe(mobilizer('app.css', {
'app.css': {
hover: 'exclude',
screens: ['0px']
},
'hover.css': {
hover: 'only',
screens: ['0px']
}
}))
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(path.join(config.dest, 'css')));
});
I've tried this Gulp task for Sass:
gulp.task('sass', function(){
return gulp.src('./src/sass/css/main.scss')
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest('./src/css/'));
});
Nothing seems to be happening (cannot see a newly generated main.scss file). Could someone help (I haven't been using Gulp before as you can probably guess. I've read through this though..)
UPDATE:
I am not actually replacing the Less task, I am just adding another task for Sass.
UPDATE 2:
I am calling the Sass task in here
gulp.task('watch', function () {
if(typeof config.server === 'object') {
gulp.watch([config.dest + '/**/*'], ['livereload']);
}
gulp.watch(['./src/html/**/*'], ['html']);
gulp.watch(['./src/sass/css/*'], ['sass']);
gulp.watch(['./src/js/**/*', './src/templates/**/*', config.vendor.js], ['js']);
gulp.watch(['./src/images/**/*'], ['images']);
});
However the problem seems to be that it's not executed.
UPDATE 3:
Here's the build phase code
gulp.task('build', function(done) {
var tasks = ['html', 'fonts', 'images', 'sass', 'js'];
seq('clean', tasks, done);
});
Your path is absolute, not relative. Don't forget the dots ;)
gulp.task('sass', function(){
return gulp.src('./src/sass/css/main.scss')
.pipe(sass())
.pipe(gulp.dest('./src/css/'));
});
I have my sass gulp task to compile my initial css:
var input = './sass/bootstrap/*.scss';
var output = './public/css';
var sassOptions = {
lineNumbers: true
};
gulp.task('sass', function () {
return gulp
// Find all `.scss` files from the `stylesheets/` folder
.src(input)
.pipe(sourcemaps.init())
.pipe(sass(sassOptions))
.pipe(sourcemaps.write())
.pipe(gulp.dest(output));
});
Then in a seperate project I have my watch task to minify the css:
gulp.task('debug-css', function () {
gulp.src([
'assets/css/style.test.css',
'assets/css/other.css'
])
.pipe(concat('app.css'))
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./build/'));
livereload.listen();
gulp.watch('assets/**/*.css', function() {
gulp.src([
'assets/css/style.test.css',
'assets/css/other.css'
])
.pipe(concat('app.css'))
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./build/'))
.pipe(livereload());
});
});
When I use chrome dev tools, I cannot see the sass partials anywhere, Is there a way I can setup sourcemaps so I can tell which css comes from which sass file?
Everything is good with your sourcemaps, you should try to separate a bit more the gulp.task and gulp.watch you've created so avoiding to confuse yourself.
I recreated your Gulpfile, adding some more useful plugins, here is the gist:
https://gist.github.com/carlosbensant/2a3a36633a06a50dda775b2a8bde3958
Working with Sourcemaps
Said that, if you want to see the sourcemaps while you're in development stage you just have to run gulp; when you just want to deploy you're app then you should run gulp css to remove the sourcemaps into the CSS compiled (and so saving file space).
Recommendation
Try to BrowserSync, after some years using LiveReload, when I used BrowserSync the first time, I didn't get back to LiveReload, because it does a lot more than just live reloading. One of the coolest thing it does is synchronizing between multiple browsers (and platforms).
Hope that helps!
var gulp = require('gulp');
var sass = require('gulp-sass');
var runSequence = require('run-sequence');
var changed = require('gulp-changed');
var plumber = require('gulp-plumber');
var to5 = require('gulp-babel');
var sourcemaps = require('gulp-sourcemaps');
var paths = require('../paths');
var compilerOptions = require('../babel-options');
var assign = Object.assign || require('object.assign');
// transpiles changed es6 files to SystemJS format
// the plumber() call prevents 'pipe breaking' caused
// by errors from other gulp plugins
// https://www.npmjs.com/package/gulp-plumber
gulp.task('build-system', function () {
return gulp.src(paths.source)
.pipe(plumber())
.pipe(changed(paths.output, {extension: '.js'}))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(to5(assign({}, compilerOptions, {modules:'system'})))
.pipe(sourcemaps.write({includeContent: false, sourceRoot: paths.sourceMapRelativePath }))
.pipe(gulp.dest(paths.output));
});
gulp.task('build-sass', function() {
gulp.src(paths.sass + '**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
style: 'expanded',
includePaths: [
paths.sass,
paths.jspmDir + '/github/Dogfalo/materialize#0.96.0/sass',
],
errLogToConsole: true }))
.pipe(sourcemaps.write(paths.sourceMapRelativePath))
.pipe(gulp.dest(paths.cssOutput))
});
// copies changed css files to the output directory
gulp.task('build-css', function () {
return gulp.src(paths.css)
.pipe(changed(paths.output, {extension: '.css'}))
.pipe(gulp.dest(paths.output));
});
// copies changed html files to the output directory
gulp.task('build-html', function () {
return gulp.src(paths.html)
.pipe(changed(paths.output, {extension: '.html'}))
.pipe(gulp.dest(paths.output));
});
// this task calls the clean task (located
// in ./clean.js), then runs the build-system
// and build-html tasks in parallel
// https://www.npmjs.com/package/gulp-run-sequence
gulp.task('build', function(callback) {
return runSequence(
'clean',
['build-system', 'build-html','build-css','build-sass'],
callback
);
});
gulp.task('default', ['build']);
I have gulp-sass working but I am not sure how to reference the System.config({
"map": { short hand to paths.
I am trying to use the materialize css framework so I imported it using
jspm install github:Dogfalo/materialize#0.96.0
which worked fine, but my concern now is that in my build task I have to reference the specific path to the sass folder including the version numbers in the includePaths property
If I look at the config.js file, jspm saved a reference to materialize under the System.config.map section, it seems if I could just reference the short hand materialize name in the code below this would solve my problem
Here is my build-sass task that I added to build.js
gulp.task('build-sass', function() {
gulp.src(paths.sass + '**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
style: 'expanded',
includePaths: [
paths.sass,
paths.jspmDir + '/github/Dogfalo/materialize#0.96.0/sass', //I would like to just reference to shorcut path included in the config.js to materialize
],
errLogToConsole: true }))
.pipe(sourcemaps.write(paths.sourceMapRelativePath))
.pipe(gulp.dest(paths.cssOutput))
});
Or if you have any better way to include a github package such as materialize using jspm and reference it in code letting jspm manage the package and version and just referencing the shorthand that jspm created
Thanks,
Dan
SASS build task
You'll need to install gulp-sass, like you mentioned. Then, you'll want to add the following task to your build file. Notice the task includes plumber and changed as well. This will signal watch to rebuild your sass when you edit it and not break serving on syntax errors.
// compiles sass to css with sourcemaps
gulp.task('build-css', function() {
return gulp.src(paths.style)
.pipe(plumber())
.pipe(changed(paths.style, {extension: '.css'}))
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest('./styles'));
});
Build task
You'll also need to add this new sass build task to your general build task, so that it is included in the build pipeline.
gulp.task('build', function(callback) {
return runSequence(
'clean',
['build-system', 'build-html', 'build-css'],
callback
);
});
Using a CSS framework in code
As you mentioned, having jspm install materialize will let jspm take care of all the heavy lifting for you. Once installed, jspm will modify the config paths to point to the right place. Then, when you need to reference it in code, you can import it normally. To install, you will want to add materialize to your package.json dependencies.
"jspm": {
"dependencies": {
"materialize": "github:Dogfalo/materialize#0.96.0",
Then, jspm will set up a map for you so you can use the normal module syntax.
import 'materialize/js/collapsible';
Materialize is not using the module syntax so, at the moment, you will need to (a) import each piece that you want specifically, as above, and (b) manually import jQuery, since materialize doesn't declare dependencies.
For more information, please see my full write up including examples here:
http://www.foursails.co/blog/building-sass/
Everything is almost working, compass is compiling the CSS and a few other tasks are running to minify, rename, rev etc. The problem is that when a style change occurs LiveReload is reloading the page instead of injecting the style. If I switch back to compass watch then style injection occurs. Is it possible to have style injection with Gulp, Compass and LiveReload? I hope so because if not I will have to run compass watch in 1 terminal and gulp in another which seems a bit clunky. Here is the relevant code from the gulpfile.js
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
compass = require('gulp-compass'),
minifyCSS = require('gulp-minify-css'),
rev = require('gulp-rev'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
lr = require('tiny-lr'),
server = lr(),
livereload = require('gulp-livereload');
gulp.task('compass', function() {
gulp.src('./static/scss/*.scss')
.pipe(compass({
css: 'static/css',
sass: 'static/scss',
image: 'static/images',
font: 'static/fonts',
javascript: 'static/js',
comments: false,
style: 'expanded',
bundle_exec: true,
require: ['wegowise_styles/compass']
}))
.on('error', function(err) {})
.pipe(gulp.dest('./static/css/'))
.pipe(livereload(server))
.pipe(minifyCSS())
.pipe(rename({suffix: '.min'}))
.pipe(rev())
.pipe(gulp.dest('./static/production/'))
.pipe(rev.manifest())
.pipe(rename('css-manifest.json'))
.pipe(gulp.dest('./static/production/'));
});
gulp.task('clean', function() {
return gulp.src(['static/production'], {read: false})
.pipe(clean());
});
gulp.task('watch', function() {
gulp.watch('static/scss/**/*.scss', ['compass']);
gulp.watch('static/js/**/*.js', ['scripts']);
});
gulp.task('default', ['clean', 'watch']);
ps. I am using the LiveReload chrome extension
Yes, it is possible. I haven't seem in your code (maybe because you removed the rest of the file) when you start tiny-lr, i.e.:
var gutil = require('gulp-util');
gulp.task('tiny', function(next) {
server.listen(35729, function() {
gutil.log('Server listening on port: ', gutil.colors.magenta(port));
next();
});
});
// add as a dependency in your watch task
gulp.task('watch', ['tiny'], function() {
gulp.watch('static/scss/**/*.scss', ['compass']);
gulp.watch('static/js/**/*.js', ['scripts']);
});
The error might be related to the scripts task as well, so maybe include it in the question so we can take a look. Maybe, finally, there is some other task causing the issue.
In order to be sure, I just created a test here, and created a index.html file inside the static folder, pointing to css/file.css.
Created a simple static/scss/file.scss with a body background-color. I've used the same code snippet you provided for the rest of the gulpfile.
Also created a node-static server and served all files under static/ folder.
At the end, is there any other automated task involved in the building process?