I'm using Gulp for running tasks like minify and conctat my css, js...
I use gulp-minify-css plugin for minify my css, and it's working fine... but I have one question, I need to change in my html the new routes of the .css and .js? Can I do that with a Task?
// including plugins
var gulp = require('gulp')
, minifyCss = require("gulp-minify-css");
// task
gulp.task('minify-css', function () {
gulp.src('./Css/one.css') // path to your file
.pipe(minifyCss())
.pipe(gulp.dest('path/to/destination'));
});
Thanks!!
You can use gulp-useref plugin to extract all css files referenced in your html, minify them and save the new html with replaced references.
Here's a full working example:
index.html
<html>
<head>
<!-- build:css css/combined.css -->
<link href="css/one.css" rel="stylesheet">
<link href="css/two.css" rel="stylesheet">
<!-- endbuild -->
</head>
<body>
(...)
</body>
</html>
gulpfile.js
var gulp = require('gulp');
var useref = require('gulp-useref');
var minifyCss = require('gulp-minify-css');
gulp.task('minify-css', function () {
var assets = useref.assets();
return gulp.src('index.html')
.pipe(assets)
.pipe(minifyCss())
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest('dist/index.html'));
});
This will produce a single, concatenated and minified css in css/combined.css and the following html in dist/index.html
<html>
<head>
<link href="css/combined.css" rel="stylesheet">
</head>
<body>
(...)
</body>
</html>
Related
I have code like this
<html>
<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="path_to_css/some_css.css" rel="stylesheet" type="text/css">
</head>
<body>
...
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="jquery/jquery.min.js"></script>
</body>
</html>
and I need plugin/loader or other way to get my html file with replaced link and script tags to content of this files, is there any way to do it?
Finnaly i wrote own plugin which fit my needs
include-file-webpack-plugin
It actually can be accomplish with:
npm i --save-dev css-loader to-string-loader
configure your webpack with
module: [
rules: [
{
test: /\.css$/,
use: ['to-string-loader', 'css-loader']
}
]
}
Then in your project you can access the css as string like so
const cssContent= require('path_to_css/some_css.css');
console.log('your css is: ', cssContent.toString());
Or maybe you want inject it manually to the page with:
const boostrap= require('bootstrap/dist/css/bootstrap.min.css');
let style= document.createElement('style');
style.id= 'boostrap';
style.setAttribute('type', 'text/css');
style.innerHTML= boostrap.toString();
document.body.appendChild(style);
Reference
Inject CSS stylesheet
css-loader
The problem
I have a lot of .php files, mostly containing HTML, but also some PHP lines on top (e.g. form trigger code or similar). So they look like
<?php
if($someValue){
//doSth
}
//more content
?>
<!DOCTYPE html>
<html lang="de">
<head>
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Content and scripts here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</body>
</html>
The goal
My goal is to minify the HTML (and maybe even the inline javascript, but that's just a little extra), without touching the PHP on top.
I'm using Gulp as automated build tool and would like to see a solution using this tool and any extra packages as they are needed.
The gulp-htmlmin module uses the html-minifier module, which has plenty of options (displayed on both its npmjs.com and github pages) that can be used. The option we will focus on is ignoreCustomFragments.
var gulp = require(gulp),
htmlmin = require(gulp-htmlmin);
gulp.task('htmltask', function(){
return gulp.src(['./dev/*.html','./dev/*.php'])
.pipe(htmlmin({
collapseWhitespace: true,
ignoreCustomFragments: [ /<%[\s\S]*?%>/, /<\?[=|php]?[\s\S]*?\?>/ ]
}))
.pipe(gulp.dest('./site'));
});
In the above code, you see we are using ignoreCustomFragments with the regex /<\?[=|php]?[\s\S]*?\?>/ to ignore code starting with <? and <?php and ending with ?>.
By default, html-minifier ignores php, so you don't have to worry about setting ignoreCustomFragments.
EDIT
Thanks amersk
Some php files you work with may not have closing tags, for example many WordPress files do not. An alternative would be to use the following instead:
ignoreCustomFragments: [/<\?[\s\S]*?(?:\?>|$)/]
This works for me !
// Gulp.js configuration
var
// modules
gulp = require('gulp'),
newer = require('gulp-newer'),
htmlmin = require('gulp-htmlmin')
// development mode?
devBuild = (process.env.NODE_ENV !== 'production'),
// folders
folder = {
src: 'src/',
build: 'build/'
}
gulp.task('minify', () => {
return gulp.src('src/*.html')
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist'));
});
;
Let's have index.html
<!-- build:js js/lib.js -->
<script src="../lib/angular-min.js"></script>
<script src="../lib/angular-animate-min.js"></script>
<!-- endbuild -->
<!-- build:js1 js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/thing-controller.js"></script>
<script src="js/models/thing-model.js"></script>
<script src="js/views/thing-view.js"></script>
<!-- endbuild -->
On the output we will have 2 files in js directory: lib.js and app.js
For usemin code from this files I'm using this task:
return gulp.src(config.src.html.index)
.pipe(usemin({
css: [rev],
html: [function () {
return minifyHtml({empty: true});
}],
js: [ngAnnotate, uglify, rev],
inlinejs: [uglify],
inlinecss: [minifyCss, 'concat']
}))
.pipe(gulp.dest(config.build.root));
This task also runs ngAnnotate, uglify tasks for lib.js it takes a long time to make all this thigs working. I need to runn only these tasks for all files which will be in app.js file.
How to exclude library files from this addtional tasks ?
As a result of this operation I need to obtain two files: vendors.js and bundle.js. They should also be uglified, but variable names must be consistent between them, but so far it either uglification or two files.
<!-- build:js1 vendor.js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<!-- endbuild -->
<!-- build:js2 bundle.js -->
<script src="js/app.js"></script>
<script src="components/stores.js"></script>
<script src="components/userInfo/UserInfo.js"></script>
<script src="components/userMenu/UserMenu.js"></script>
<script src="components/components.js"></script>
<!-- endbuild -->
Please use the already minified versions provided by AngularJS itself. You should not uglify third party dependencies when these are already provided.
Hence you should concat angular and all other angular components into one vendor file and uglify and concat your own javascript.
When you take a look at path bower_components/angular/, there should also be a angular.min.js file (as well as the other angular components).
Take a look at my default setup for GulpJS and AngularJS at https://github.com/elgervb/skeletonSPA. I use a simular approach.
Try this:
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concatJS = require('gulp-concat');
gulp.task('concat-js', function () {
gulp.src(['one.js', 'two.js'])
.pipe(concatJS('first.js'))
.pipe(uglify())
.pipe(gulp.dest('./javascript'));
gulp.src(['three.js', 'four.js'])
.pipe(concatJS('second.js'))
.pipe(uglify())
.pipe(gulp.dest('./javascript'));
});
I'm currently using the gulp-usemin pluign, however I'm struggling with one thing: using the images the package provides!
<!-- build:css lib/css/main.min.css -->
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.css">
<!-- endbuild -->
The font-awesome bower package also comes with the fonts:
bower_components/font-awesome/fonts/**.*
I currently compile my css with the usemin plugin:
gulp.task('usemin', function() {
return gulp.src('src/index.html')
.pipe(usemin({
css: [minifyCss(), 'concat'],
}))
.pipe(gulp.dest('dist/'));
});
Right now this scans my HTML with the above build paths, and successfully minifies it.
However the problem I have, is that now my font-awesome CSS is looking for the fonts in the wrong place, as they're no longer in the same directory.
How do I fix this?
Figured this out by finding this question: Can you remove a folder structure when copying files in gulp?
My task is now uses gulp-rename:
gulp.task('copy-bower_fonts', function() {
return gulp.src(paths.bower_fonts)
.pipe(rename({
dirname: '/fonts'
}))
.pipe(gulp.dest('dist/lib'));
});
The fonts from the packages which look for ../fonts/ now points to a correct location.