The problem is I don't understand why in chrome my file name is app.css?_[sm]
I expected it to be just app.css
app.css is a minified file.
What I really want to achieve is to link the file loaded in chrome source panel to my local file.
Before I have minified and sourcemapped the file I could do this in chrome, so I could edit CSS and save to my local file on the fly.
I think the problem has something to do with that ?_[sm]parameter after the file name. So chrome is not able to link to my local file.
Here's my gulpfile:
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('minify-css', () => {
return gulp.src(['../css/*.css', '../css/common/*.css'])
.pipe(sourcemaps.init())
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(gulp.dest('../css/dist'));
});
gulp.task('default', ['minify-css']);
Related
I've build a new app with an express-generator so i've got public dir with javascripts i guess for a client side. But i can't get access to this files.
My app.js has for an absolute path
app.use(express.static(path.join(__dirname, 'public')));
But when i put on my index.html page on the bottom of the body like this
<script type="text/javascript" src="/javascripts/main.js">
i've got an error inside a console with a 404 regarding to this script.
you need to install stylus and nib npm modules
var express = require('express')
, stylus = require('stylus')
, nib = require('nib')
function compile(str, path) {
return stylus(str)
.set('filename', path)
.use(nib())
}
app.use(stylus.middleware(
{ src: __dirname + '/public'
, compile: compile
}
))
app.use(express.static(__dirname + '/public'))
I am developing something similar. I have my javascript files inside js folder in public folder. This is my link to javascript and I am not getting any error:
<script src="js/options.js"></script>
I think you needed to remove a common slash in "src" tag or properly close the "script"
We have a *.sln that includes an ASP.NET Core RC2 *.csproj for client html only (ASP.NET Controllers are in another *.csproj).
This gives the following folder/file structure:
SolutionRoot/
ClientProjectRoot/ <- project root, npm root folder
wwwroot_dev/ <- location of src dev files,
wwwroot/ <- where gulp concats, minimifies, optimises, and root of static pages
bower_packages/
node_modules/
package.json
bower.json
.bowerrc <- where 'directory' is set to 'wwwroot/bower_packages/'
gulpfile.js
Requirements I'd like to meet are:
The csproj is only client artifacts, with no asp.net C# code, so that we can give the whole project to external devs with UI expertise, and slot it back into the solution when done.
The wwwroot/index.html file should be accessible as http://example.com/index.html -- not http//example.com/wwwroot.html
CSS and JS should be minified, and in wwwroot, and html picked up from there (ie wwwroot_dev is there just for editing purposes but never served from directly).
No idea where bower packages should be -- part of this question.
The gulpfile has tasks defined, which correctly minify the css and scripts found in wwwroot_dev into app.min.js and app.min.css within wwwroot.
It's the html files, passed through gulp-inject and wiredep that get their relative pathing wrong. They both include wwwroot in the output.
My files so far are:
.bowerrc:
{
"directory":"wwwroot/bower_components"
}
And in gulpfile.js, the html task looks as follows:
gulp.task('dist:html',['dist:scripts'],function(){
//get the dest js and css that previous tasks have already minifieded:
var sources = gulp.src(
['wwwroot/scripts/**/*.js', 'wwwroot/scripts/**/*.css'],
{read:false}
);
return gulp
.src("wwwroot/scripts/**/*.html", {})
.pipe(plugins.inject(sources, {relative:true}))
.pipe(plugins.wiredep(sources,{relative:true}))
.pipe(gulp.dest("wwwroot/");
});
The output is (wrong) as it mentions wwwroot/, when it simply be ../js/ etc:
<!-- bower:js -->
<script src="../wwwroot/bower_components/jquery..."></script>
<!-- endbower -->
<!-- inject:js -->
<script src="/wwwroot/js/main.min.js"></script>
<!-- endinject -->
I serve from wwwroot:
gulp.task('serve',function(){
return gulp
.src('wwwroot')
.pipe(plugins.webserver(
{ directoryListing:false,open:"http://localhost:8000/"}))
}
I've tried lots of different inject and wiredep option flags (relative:true, ignorePath, cwd, -- but wwwroot is always mentioned. Can't get rid of it!)
So my question is...
a) is my directory structure approximately right -- or totally flawed
b) if basically right, what tweak can I do to get the paths generated by inject and wiredep to be relatively right?
Thank you!
Try this
gulp.task('render', function () {
var target = gulp.src('./Views/Shared/_Layout.cshtml');
var sources = gulp.src([path.wwwroot + "/**/*.js", path.wwwroot + "/**/*.css"], { read: false });
return target.pipe(inject(sources, {
transform: function (filepath) {
//Delete wwwroot
for (var i = 0; i < arguments.length; i++) {
if (typeof (arguments[i]) == 'string')
arguments[i] = arguments[i].replace("/wwwroot", '');
}
return inject.transform.apply(inject.transform, arguments);
}
}))
.pipe(gulp.dest('./Views/Shared'));
Had the same issue, solved it based on this solution:
https://stackoverflow.com/a/34581414
gulp.task('inject', function () {
var target = gulp.src('src/_Layout.cshtml');
return target.pipe(inject(
gulp.src(paths.wwwroot + 'css/**/*.css', { read: false }),
{
transform: function (filePath) {
var newPath = filePath.replace('/wwwroot', '');
return '<link rel="stylesheet" href="' + newPath + '"/>';
}
})
)
.pipe(gulp.dest('Views/Shared'));
});
I'm a late arrival to the Bower scene. I thought I'd try it with my current Express project. I installed it, and created the .bowercc and bower.json file per instructions. I installed a Bootstrap skin I planned on using, which brought with it jQuery. The thing is, you get tons of files, and I'd like to use just the minified versions of JS, CSS and fonts.
After scowering the net, I found a lot about using gulp or grunt to sift through the files, and pipe them to the /public folder Express provides. My question is: how do you do it properly? How do I get just the files I need there? Or am I better off foregoing bower and just downloading the zip file, picking up the end result and placing in the /public folder?
Looking at the comments, it seems like the answer is yes - manual job is required to get your components distributeables to your public folder. Using gulp will automate it, but basically it'd be a hit-and-miss at first, requiring some fine tuning. In case someone lands on this question, here's the solution I went with:
1) Provide package overrides in the bower.json file to ake sure only the minified files are exposed:
{
"name": "charlie",
"dependencies": {
"bootstrap-material-design": "~0.3.0"
},
"overrides": {
"bootstrap-material-design": {
"main": ["**/dist/js/*.min.js", "**/dist/css/*.min.css", "**/dist/fonts/*"]
},
"jquery": {
"main": "**/dist/jquery.min.js"
}
}
}
2) Use the main-bower-files gulp package to grab those "mains" and distribute them to the final locations. Here's my gulpfile.json (just the bower part:
var bower = require('main-bower-files');
var gulpFilter = require('gulp-filter');
var uglify = require('gulp-uglify');
var minifyCSS = require('gulp-minify-css');
var clean = require('gulp-clean');
var debug = require('gulp-debug');
var getDist = function(vendor) {
var publicDir = 'public';
var dist = vendor ? publicDir + '/vendor' : publicDir;
return {
dir: dist,
css: dist + '/css/',
js: dist + '/js/',
fonts: dist + '/fonts/'
};
};
gulp.task('cleanVendor', function() {
return gulp.src(getDist(true).dir, {read: false})
.pipe(clean());
});
gulp.task('bower', ['cleanVendor'], function() {
var dist = getDist(true);
var jsFilter = gulpFilter('**/*.js');
var cssFilter = gulpFilter('**/*.css');
var fontsFilter = gulpFilter(['**/*.woff*', '**/*.eot', '**/*.svg', '**/*.ttf']);
return gulp.src(bower())
.pipe(fontsFilter)
.pipe(gulp.dest(dist.fonts))
.pipe(fontsFilter.restore())
.pipe(jsFilter)
.pipe(gulp.dest(dist.js))
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(gulp.dest(dist.css))
.pipe(cssFilter.restore());
});
3) In your HTML file, include /vendor/js/blah.min.js or /vendor/css/blah.min.css
Note: the annoying part was that I had to specify every font extension in the fontsFilter. I tried using '**/fonts/*' but main-bower-files returns a flat list of files, and if you provide the {base: 'mybase'} parameter, it returns a tree, meaning you get the entire tree structure per file - anyone who can come up with a fix, is invited to submit an answer.
Let's say I have modules similar to this one:
"use strict";
var moduleCss = require("module1.css");
var template = require("module1.hmtl");
module.exports = function(){
//my module code here
};
And another one with a different css file.
"use strict";
var moduleCss = require("module2.css");
var template = require("module2.hmtl");
module.exports = function(){
//my module code here
};
The main file would look like this:
"use strict";
var module1 = require("module1");
var module2 = require("module2");
var normalize = require("normalize.css");
var bootstrap = require("bootstrap.css");
module.exports = function(){
//my module code here
};
Instead of appending each css file content as a style tag, i'd like to get a main.css when building the main bundle by looking at each required css file in each module and building a single CSS file containing all the styles in all required modules so that I can append this single css file where I want.
I'm basically trying to have the css requirements in the same spot as the js and html requirements. The solutions that I found so far require a different CSS file that keeps track of each module css dependency, so adding or removing a module in my applications requires work in 2 files, the main js and the main css.
Is there a way to achieve this? To have ALL dependencies into one file? Or could a "package.json" thingy be used for each module where the CSS dependencies could be declared?
After playing around a little bit with browserify it turned out the transform function hook reveals the file name of each required file. I basically looked for css and less file, return a empty module for them, and kept each file in a reference array.
After the bundle was done, by listening to the bundle event, I created a string where I basically "included" each file that I captured in the reference array.
With the import file created, I simply passed it to the less compiler.
Here's a link to the gist for my current task : https://gist.github.com/vladnicula/fd1ff7b30ef20789e1dc
I got my less files compiled in css perfectly by grunt and I see result in .tmp/public/styles
So now livereload with grunt-contrib-watch should be made naturally in sails generated project ?
Or do I have to make a special configuration ?
I found that in tasks/pipeline.js file but not sure of what to do.
// CSS files to inject in order
//
// (if you're using LESS with the built-in default config, you'll want
// to change `assets/styles/importer.less` instead.)
var cssFilesToInject = [
'styles/**/*.css'
];
I saw in the file tasks/README.md :
###### `sails lift`
Runs the `default` task (`tasks/register/default.js`).
And in the file default.js we got :
module.exports = function (grunt) {
grunt.registerTask('default', ['compileAssets', 'linkAssets', 'watch']);
};
But watch.js file is missing in the folder...
What should it be ?
Watch does only looking for files that have changed and execute less, sass, injection and so on - but it doesn't make a reload.
You can add this in task/config/watch.js