I'm currently trying to remove unused CSS from a project's stylesheets. I have a gulp task sass where all the compiling is being done. I'm using postcss and a plugin for purgecss. However, when I run the sass task purgecss doesn't seem to be working.
gulp.task('sass', () => gulp.src(`${SRC}/scss/style-*.scss`)
.pipe(sourcemaps.init())
.pipe(gulpSass({
includePaths: ['node_modules', `${PATTERNS_ACCESS}/src/`]
.concat(require('bourbon').includePaths)
})
.on('error', gulpSass.logError))
.pipe(postcss([
purgecss({
content: ['./views/**/*.twig']
}),
autoprefixer(),
mqpacker({sort: true}),
cssnano()
]))
.pipe(hashFilename({format: HASH_FORMAT}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./assets/styles'))
);
Above if you notice purgecss I pass it the path to to the templates it should remove the css from. Using the PostCSS API following the documentation, I add the directory of the templates:
const purgecss = require('#fullhuman/postcss-purgecss')
postcss([
purgecss({
content: ['./src/**/*.html']
})
])
Is there anything I should add to the configuration on the purgecss besides content?
what can the issue be?
Related
I just running my gulp task recently, but when try running a task such as sass, it didn't affect anything to the file source. Actually the task is running on CLI, but nothing changes. I'm using templating style to my function, and if I change it to a normal writing path(src/../..), the task is running well. Can somebody explain this, please?
const sourceAssetsCss = 'src/assets/css';
const sourceAssetsScss = 'src/assets/scss';
***// Compile SCSS to CSS src developer***
function sassRun() {
var prefix = [autoprefixer({
overrideBrowserslist: ['last 3 version']
})];
return gulp
.src(sourceAssetsScss + '/*scss')
.pipe(sourcemaps.init())
.pipe(plumber())
.pipe(sass({
outputStyle: 'nested'
}).on('error', sass.logError))
.pipe(postcss(prefix))
.pipe(plumber.stop())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(`${sourceAssetsCss}`))
.pipe(notify('sass successfully compiled'));
}
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've got gulp running compiling and minifying my scss and js files correctly, but for the life of my I can't seem to correctly compile haml files with the gulp-haml module.
The respective code in my gulpfile.js looks like this:
gulp.task('haml', function() {
gulp.src('.app/**/*.haml')
.pipe(plumber())
.pipe(haml())
.pipe(gulp.dest('./hamltest'));
});
gulp.task('scripts', [
'styles',
'app',
'haml'
]);
gulp.task('watch', function() {
gulp.watch([
'./styles/',
'.app/**/*.js',
'.app/**/*.haml'
],
[
'styles',
'app',
'haml'
]);
});
gulp.task('default', [
'styles',
'scripts',
'haml',
'watch'
]);
I've set up all my gulp variables and I'm running:
gulp-haml -v 0.1.6
haml -v 0.4.3
gulp CLI -v 1.2.2
Local -v 3.9.1
using the command: $ gulp in terminal to run everything
At this point I'm wondering if it's even possible to compile multiple haml files into one html or compile multiple haml files into a main haml file to then render into html.
Is using haml partials a better method to do this? Is this whole thing even possible with Gulp? Any insight would be much appreciated.
Additional Info: I've also tried using the pipe order() and pipe concat() functions
With gulp-haml Impossible to compile Ruby code like:
= Haml::Engine.new(File.read('./includes/menu-main.haml')).render
because gulp-haml has no full Ruby engine functionality. If you want to use Ruby, download it and install, then install haml for it (but Ruby requests are very slow ~1-3s). Or, use some other templater, like gulp-file-include, so you can compile then include your compiled .HTML files (im using gulp-jhaml, it has same features with gulp-haml):
var haml = require('gulp-jhaml'),
gih = require('gulp-include-html'),
browserSync = require('browser-sync');
gulp.task('haml', function() {
return gulp.src(['source-folder/*.haml'])
.pipe(haml({}, {eval: false}))
.on('error', function(err) {
console.error(err.stack)
})
.pipe(gulp.dest('source-folder/html'));
});
gulp.task('html-include', ['haml'], function () {
gulp.src(['source-folder/html/*.html'])
.pipe(gih({
prefix: '##'
}))
.pipe(gulp.dest('result-folder'));
});
gulp.task('watch', ['html-include', 'browser-sync'], function() {
gulp.watch('source-folder/*.haml', ['html-include']);
gulp.watch('result-folder/*.html', browserSync.reload);
});
gulp.task('default', ['watch']);
You can also try gulp-pug with a native function include. Pug - was called 'Jade' before.
I am using Gulp to compile my bootstrap.less file into a bootstrap.css file. All the bootstrap LESS files are in a "less" folder and all of the CSS files are in a CSS folder. All of the bootstrap less files are #import'd into bootstrap.less and then that file is compiled to bootstrap.css. However I have one custom.less file that is in the bootstrap LESS folder. I would like to compile into a custom.css file in the CSS folder. I cannot get Gulp to do this. Here is my code.
var gulp = require('gulp');
var less = require('gulp-less');
var browserSync = require('browser-sync').create();
gulp.task('less', function() {
return gulp.src(['./less/bootstrap.less', './less/custom.less'])
.pipe(less())
.pipe(gulp.dest("./css"))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('serve', function(){
browserSync.init({
server: {
baseDir: './'
}
});
gulp.watch('./less/*.less', ['less']);
gulp.watch(['./**/*.html', './js/custom.js']).on('change',
browserSync.reload);
});
gulp.task( 'default', ['less', 'serve']);
What I usually do is compile all .less or .scss files into css folder. You will end up with a few empty files (a good example would be .less files that contain variables) but on the other hand you can create a gulp task to clear those files out. I use the following code to compile:
return gulp.src("Styles/scss/*.scss")
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest("Styles/css"))
.pipe(reload({stream: true}));
I'm also generating sourcemaps here but you can remove that. If you would like to discover more checkout this post here
Hope this helps ;)
I'm trying to write a simple gulp task that takes a scss file called manifest.scss and after compiling and minifying the file it saves the result into a destination folder as app.css
The following task does almost everything I want beside renaming the file (the output is build/css/manifest.css)
gulp.task('sass', function() {
gulp.src("src/sass/manifest.scss")
.pipe(sass({ style: 'compressed' }))
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'));
});
So, I have tried gulp-rename and I have update the task as follows:
gulp.task('sass', function() {
gulp.src("src/sass/manifest.scss")
.pipe(sass({ style: 'compressed' }))
.pipe(minifyCSS())
.pipe(rename('app.css'))
.pipe(gulp.dest('build/css'));
});
This produces the build/css/app.css file but it is totally blank.
How can I rename the compiled file?
Thanks