I need compress CSS and JS files without "multiple css files to one".
My IDE: PhpStorm
My Framework: Laravel 5.3
For example:
I need compress this file:
<link rel="stylesheet" href="/fonts/fonts.css">
<link rel="stylesheet" href="/site/css/menu.css">
<link rel="stylesheet" href="/site/css/select2.css" />
<link rel="stylesheet" href="/site/css/bootstrap.css">
to:
<link rel="stylesheet" href="/fonts/fonts.min.css">
<link rel="stylesheet" href="/site/css/menu.min.css">
<link rel="stylesheet" href="/site/css/select2.min.css" />
<link rel="stylesheet" href="/site/css/bootstrap.min.css">
I use this code in Gulpfile.js:
gulp.task('BootstrapCss', function () {
gulp.src('public/site/css/bootstrap.css')
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('public/site/dist/css'));
});
Is a code should be written for each file?
Fixed Answer
You can try the foreach gulp module to iterate over all files and minify each separately.
var foreach = require('gulp-foreach');
gulp.task('BootstrapCss', function () {
gulp.src('public/site/css/*.css')
.pipe(foreach(function(stream, file){
return stream
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
}))
.pipe(gulp.dest('public/site/dist/css'));
});
Old Answer
Just use a catch-all *.css. I've replaced bootstrap.css with *.css below:
gulp.task('BootstrapCss', function () {
gulp.src('public/site/css/*.css')
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('public/site/dist/css'));
});
Related
CSS is working when i write route
Route::get('/showproduct', [ShowController::class,'index'])->name('showproduct');
Also Controller: ShowController
public function index()
{
//
return view('home.showproduct');
}
But in that way
Route
Route::get('/showproduct/{id}', [ShowController::class,'index'])->name('showproduct');
And Controller: ShowController
public function index($id)
{
//
return view('home.showproduct',['id'=>$id]);
}
Just html is comes, css and javascript not installing.
View folder name also showproduct.blade.php in home folder.
It seems you include css and js is reference to relative/current directory like below:
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
You should add a leading slash (/) to the path like below:
<link rel="stylesheet" type="text/css" href="/style.css">
<script src="/script.js"></script>
or could be better use asset() to use a full URL
<link rel="stylesheet" type="text/css" href="{{asset('css/layouts/style-horizontal.css')}}">
<script src="{{asset('js/plugins.js')}}"></script>
so, I'm trying to link a css file to an ejs file but it's not working, and I think I'm linking them correctly:
<head>
<title>Acres & Karats Calculator</title>
<base href="/">
<link type="text/css" href="css/Acres and Karats Calculator.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,700&display=swap" rel="stylesheet">
and i specified the public directory to be used in express:
let express = require("express"),
app = express();
app.use("/public", express.static(__dirname + "/public"));
app.get("/", (req, res) => {
res.render("Acres and Karats Calculator.ejs")
});
app.listen("3000", () => {
console.log("Server started!");
});
and there are no errors in the console at all and the css is not loaded
file structure:
app.js
views
pubilc
css
Acres and Karats Calculator.css
I solved it by adding rel="stylesheet" and adding a / before the file path
Taking into account the directory layout of your project:
app.js
views
-|_pubilc
---|_css
-----|_Acres and Karats Calculator.css
and the link to the css file in the ejs template:
<link type="text/css" href="css/Acres and Karats Calculator.css">
express static path in your app.js should be updated as follows:
app.use(express.static(__dirname + "/views/public"));
Please help me as i am trying to add a css file all the day long and always fail
app.js code :
var express = require("express");
var app = express();
var path = require('path');
app.set('view engine', 'ejs');
app.set('views', '../node_modules/express/views/');
app.use(express.static('public'));
app.get("/",function(req,res){
console.log("welcome");
res.render("test");
});
app.listen(3000,function(){
console.log("connected")
});
test.ejs code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- <link type="text/css" href="app.css">-->
<!-- <link href="/public/app.css" rel="stylesheet" type="text/html">-->
<!-- <link type="text/css" href="/public/app.css">-->
<!-- <link rel="stylesheet" type="text/css" href="/app.css" >-->
<link rel="Style" type="text/css" href="/app.css" >
</head>
<body>
<h1>here</h1>
</body>
css code :
body{
background-color: green;
}
server structure :
root-->public-->app.css
i also faced the error : was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff). but i solved it and and tried a lot of ways to change the path and keep it in the same folder with the ejs
thank you in advance
in your app.js
app.use(express.static(__dirname + '/public'));
app.use('/public', express.static(__dirname + '/public'));
In app.js:
app.use(express.static('public'))
In ejs/html:
<link rel="stylesheet" href="/css/index.css">
Serving static files in Express
Okay guys thank you all but the solution was just to add ../ before public
app.use(express.static('../public'));
as express was searching for public inside the server folder that has the app.js
I am following this tutorial. I could manage to browserify the bootstrap JS files, but I was wondering how can I add the bootstrap css to my config. I know that files are in node_modules folder, but how can I add them to the build workflow I already have?
gulpfile.js
...
gulp.task('sass', function() {
return gulp.src('./sass/style.sass')
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulp.dest('./dist/css'));
})
gulp.task('browserify', function() {
// Grabs the app.js file
return browserify('./app/app.js')
// bundles it and creates a file called main.js
.bundle()
.pipe(source('bundle.js'))
// saves it the public/js/ directory
.pipe(gulp.dest('./dist/js/'));
})
...
app.js:
require('angular')
require('bootstrap')
var app = angular.module('app', []);
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>My App</title>
<script src="/js/bundle.js"></script>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div style="height: 100%;" ui-view></div>
</body>
</html>
With the release of famo.us, it has all the libraries as CDN hosted libs. How can I use these from within a meteor app?
I get a lot of problems with the "define" in the famo.us code...
What I've done is create a new meteor app, and then from the famo.us boilerplate, I've taken the html and put it into a client folder so it looks like
<head>
<title>famo.us App</title>
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- shims for backwards compatibility -->
<script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<!-- module loader -->
<script type="text/javascript" src="http://code.famo.us/lib/require.js"></script>
<!-- famous -->
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.2/famous.css" />
<script type="text/javascript" src="http://code.famo.us/famous/0.2/famous.min.js"></script>
<!-- app code -->
<link rel="stylesheet" type="text/css" href="css/app.css" />
<script type="text/javascript">
require.config({'localhost:3000': 'public/'});
require(['main']);
</script>
</head>
<body>
</body>
Then I've taken the main.js in the src folder of the boiler plate and put it into the client/compatibility folder of meteor. But it doesn't really work. Comes back with
Uncaught ReferenceError: define is not defined
from main.js
and main.js looks like
define(function(require, exports, module) {
// import dependencies
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var ImageSurface = require('famous/surfaces/ImageSurface');
// create the main context
var mainContext = Engine.createContext();
// your app here
var logo = new ImageSurface({
size: [200, 200],
content: 'http://code.famo.us/assets/famous_logo.svg',
classes: ['double-sided']
});
var initialTime = Date.now();
var centerSpinModifier = new Modifier({
origin: [0.5, 0.5],
transform : function(){
return Transform.rotateY(.002 * (Date.now() - initialTime));
}
});
mainContext.add(centerSpinModifier).add(logo);
});
from looking at the source, it looks like its because meteor has compiled main.js and included before the famo.us stuff gets loaded.
Have you tried loading main.js directly in the script tag instead of using the script tag to "require" it in. I'm doing something similar where I inject the main.js code directly into the html, but here is an example where I've split it out and it works (although I'm not using meteor.)
Clearly I'm also making a bit of an alteration to the code and not using define, but this change is straight forward. Here are the html and js...
html:
<html>
<head>
<title>Debug Output</title>
<meta name='viewport' content='width=device-width, maximum-scale=1, user-scalable=no' />
<meta name='mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='black' />
<script type='text/javascript' src='http://code.famo.us/lib/functionPrototypeBind.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/classList.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/requestAnimationFrame.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/require.js'></script>
<link rel='stylesheet' type='text/css' href='http://code.famo.us/famous/0.2/famous.css' />
<script type='text/javascript' src='http://code.famo.us/famous/0.2/famous.min.js'></script>
<link rel='stylesheet' type='text/css' href='styles/app.css' />
<script type='text/javascript' src='tstPackage.js'>
</script>
</head>
<body>
</body>
</html>
js:
require(['famous/core/Engine','famous/core/Surface'],function(Engine,Surface) {
// Famo.us Context Example
//var Engine = require('famous/core/Engine');
//var Surface = require('famous/core/Surface');
var mainContext = Engine.createContext();
var surface = new Surface({
size: [200, 200],
content: 'Hello World',
classes: ['red-bg'],
properties: {
lineHeight: '200px',
textAlign: 'center'
}
});
mainContext.add(surface);
// from https://famo.us/examples/0.2.0/core/context/example
});
Have you tried to import mjn:famous package into your meteor project?
meteor add mjn:famous
great question; famo.us is moving away from Yeoman / Grunt
to clean up rich's answer, here's a simple index.html
<html>
<script src='http://code.famo.us/lib/require.js'></script>
<script src='http://code.famo.us/famous/0.2/famous.min.js'></script>
<script>
require([
'famous/core/Engine',
'famous/core/Surface',
'famous/core/Modifier'
], function(Engine, Surface, Modifier){
var context = Engine.createContext();
var helloSurf = new Surface({
content: 'hello world',
properties: {
backgroundColor:'red'
}
});
var helloMod = new Modifier({
size: [100, 100],
origin: [.5, 0]
});
context.add(helloMod).add(helloSurf);
});
</script>
<html>