Replaces css and js links with file contents
Install with npm
npm install --save-dev gulp-smoosher
<html>
<head>
<!-- smoosh -->
<link rel='stylesheet' href='styles.css'>
<!-- endsmoosh -->
</head>
...body {
background: red;
}var gulp = require('gulp');
var smoosher = require('gulp-smoosher');
gulp.task('default', function () {
gulp.src('index.html')
.pipe(smoosher())
.pipe(gulp.dest('dist'));
});<html>
<head>
<style>body {
background: red;
}</style>
</head>
...Pass in custom js/css tags, if so desired. Example:
var gulp = require('gulp');
var smoosher = require('gulp-smoosher');
gulp.task('default', function () {
gulp.src('index.html')
.pipe(smoosher({
cssTags: {
begin: '<p:style>',
end: '</p:style>'
},
jsTags: {
begin: '<p:script>',
end: '</p:script>'
}
}))
.pipe(gulp.dest('dist'));
});will result in the following:
<html>
<head>
<p:style>body {
background: red;
}</p:style>
<p:script>alert('Hello world!');</p:script>
</head>
...Say your index.html is still in your src/ directory and files you intend to smoosh are already written to your dist/. In this case, specify a custom base to resolve your files from.
gulp.task('default', ['minifyCss', 'uglifyJs'], function () {
gulp.src('src/index.html')
.pipe(smoosher({
base: 'dist'
}))
.pipe(gulp.dest('dist'));
});If you use grunt instead of gulp, but want to perform a similar task, use grunt-html-smoosher.
- Gabriel Florit
- Andrew Shaffer
- Jackson Ray Hamilton
MIT © Gabriel Florit
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent