i just installed Foundation 6 through:
foundation new
I chose Foundation for Sites. The file structure is created ann all look ok.
then i run
foundation watch
everything looks fine. The gulp runs and watches the changes.
i then created _custom.scss and imported it into app.scss with:
#import 'custom';
i even put the command to the end of the file to see if this changes anything.
I write some css in the custom file then i save.
I can see the custom css created inside scss/app.scss file but the custom CSS does not appear.
Also even if i change a parametter in _settings.scss like
$body-background: $black;
it has no effect.
All the above changes are reflected in the
foundation watch
terminal window though. I can see the sass compiler updating without errors.
thanks
Maybe it's cache, you should check that. I don't know how foundation new is working, but it's watching the foundation source code right? Maybe there is a conflict between foundation tool and gulp. What I mean by that is that maybe foundations is compiling, then gulp is recompiling without your file.
I suggest you to check:
Maybe there is some cache provided either by foundation or by gulp-cache or other plugin
It is possible some kind of rewrite, so check that too
Make sure there are no errors in your file, otherwise the changes won't be made
Your custom file should be included last, so it can overwrite other classes
If this didn't help, try a different approach with gulp and bower. Make these changes to your gulpfile:
var gulp = require('gulp'),
...,
connect = require('gulp-connect'),
sass = require('gulp-sass');
var paths = {
css: [
'bower_components/foundation-6/css/foundation.min.css',
'src/sass/*.scss',
'src/sass/**/*.scss'
],
...
}
gulp.task('connect', function() {
connect.server({
root: 'dist',
livereload: true,
host: '0.0.0.0',
port: '8080'
});
});
gulp.task('css', function() {
gulp.src(paths.css)
.pipe(sass())
...
.pipe(gulp.dest('dist/css'))
.pipe(connect.reload());
});
gulp.task('watch', function() {
gulp.watch(paths.css, ['css']);
});
gulp.task('default', ['connect', 'css', 'watch']);
Basically I am suggesting to download foundation scss with bower, and include it in gulp.
Related
Actually for a recent project i downloaded a theme (Admin Panel). It mostly contains css in parts in the form of .scss files . I tried editing files directly from style.css but nothing seems to change . so i did little bit of research and found that scss files need to compiled again . I don't know how to compile .scss files. On their github page i found that it can be changed with the help of following commands
gulp serve
I don't know the above command was to compile again scss into css but it didn't work
So ,kindly help with this or just a provide a link to the tutorial from where i could learn this
Here's the link for the project that i have just downloaded
https://github.com/BootstrapDash/PurpleAdmin-Free-Admin-Template
Thanks in Advance
Setting up a SCSS compiler for a project where you don't use SCSS yourself is tedious. Instead, try compiling it quickly and edit the CSS files after you compiled it.
You can use free compilers online, for example https://www.cssportal.com/scss-to-css/.
If you would like to start a project with SCSS where you compile it, you can indeed use the GULP setup provided by Bootstrap.
https://mdbootstrap.com/bootstrap-gulp-tutorial/
You can also easily setup Gulp yourself:
https://codehangar.io/gulp-sass/
The above URL explains the following a little more extensive:
npm install gulp-sass --save-dev
Structure:
-index.html
--assets
---styles
----sass
-----index.scss
----css
The 'styles' Task
//gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
//style paths
var sassFiles = 'assets/styles/sass/**/*.scss',
cssDest = 'assets/styles/css/';
gulp.task('styles', function(){
gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
});
Watcher
gulp.task('watch',function() {
gulp.watch(sassFiles,['styles']);
});
gulp watch
I'm a little new with gulp. I have an old Wordpress theme which I'm trying to use gulp with to compile the LESS files. My structure is like this:
-theme
--library
---less
----style.less (all the imports all of the less files)
----brew (all the less files are in this folder)
---css
----style.css (this is the compiled css file)
-gulp-dev
--node_modules
--gulpfile.js
--package.json
And here is my gulpfile:
var gulp = require('gulp');
var less = require('gulp-less');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
/* Task to compile less */
gulp.task('compile-less', function() {
gulp.src('../theme/library/less/style.less')
.pipe(less())
.pipe(gulp.dest('../theme/library/css/'));
});
/* Task to watch less changes */
gulp.task('watch-less', function() {
gulp.watch('../theme/library/less/**/*.less' , ['compile-less']);
});
gulp.task('serve', function () {
// Serve files from the root of this project
browserSync.init({
open: 'external',
proxy: 'wordpress.localhost:8080',
port: 8080
});
gulp.watch('../theme/library/less/**/*.less').on("change", reload);
});
/* Task when running `gulp` from terminal */
gulp.task('default', ['watch-less', 'serve']);
This seems to work fine. I run gulp and it launches Browsersync and starts watching my LESS files. I make a change to one of the LESS files, it tracks the change and compiles, and the change shows up on the local website. Everything works fine. The problem is, the next time I make a change and save it, gulp tells me that is saw the save and compiled the file again, but the changes don't appear in the file. Nothing in style.css changes after I've made that first change. If I close out gulp then run it again, it compiles the LESS changed the first time but then doesn't do it again.
If I open the compiled css file in sublimetext, I can see it refresh when it recompiles... but the changes just don't show up.
Any ideas what is going on here?
Usually when I code css/scss/less and make a change, I need to refresh the browser to see the latest changes, I have a dual monitor setup and I think it would be very handy to configure the browser or a specific tool/IDE to see the changes live on the browser, without having to refresh the page.
Gulp example
var gulp = require('gulp'),
less = require('gulp-less');
browsersync = require('browser-sync');
gulp.task('less', function() {
return gulp.src('./src/*.less')
.pipe(less())
.pipe(gulp.dest('./css'));
});
gulp.task('bs', function() {
browsersync({
proxy: 'localhost:9000'
});
});
gulp.task('default', ['less','bs'], function(){
gulp.watch('./src/*.less', ['less']);
gulp.watch('./dest/*', browsersync.reload);
})
if you are using sublime as your text editor you can use livereload
there are some tools will do the job for you like
CodeKit for mac
Prepros for windows
Im using prepros on windows and its very cool
You can use Easy Auto Refresh if you have Chrome.
You can also setup Grunt/Gulp to watch your changes and livesync your browser.
Looks to me like #Rahul's list of tools is going to include what you're looking for, but #JustinRvt mentioned that you can use Gulp… I currently use Gulp in my typical workflow, so here's the most basic example of how that would work.
To understand really what's going on here, and to get Gulp installed on your computer, you'll need read a Gulp guide (I recommend "Gulp for Beginners"; gulp-less documentation is here, gulp-sass documentation here, and Browsersync documentation here).
The way it works is you use Browsersync to run a your site on a local server, have gulp watch for changes to your stylesheet(s), and tell Browsersync to reload the page every time gulp detects a change in one of them.
This demo supports a folder structure like
project
package.json
gulpfile.js
app
index.html
styles-less.less // any of these three < v vv
styles-scss.scss
styles-css.css
where index.html has
<head>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="styles-less.css">
<link rel="stylesheet" href="styles-sass.css">
</head>
The gulpfile.js:
var gulp = require('gulp'),
less = require('gulp-less'), // remove if you aren't using LESS
sass = require('gulp-sass'), // remove if you aren't using Sass
browserSync = require('browser-sync');
// this gulpfile assumes
// - the simplest flat folder structure, where index.html and all stylesheets are in a directory "app" in the top level of the project directory
// if the actual folder structure is different,
// - adjust the src, dest, and watch globs
// - and use `browserSync.init({server: {baseDir: 'yourbasedirectory'}});`
// - that your html files `<link>`s one or more css files
// for every .less file, output a .css file with the original file's base name. Remove this task if you aren't using LESS
gulp.task('less', function() {
return gulp.src('./app/**/*.less')
.pipe(less())
.pipe(gulp.dest('./app'))
});
// for every .scss file, output a .css file with the original file's base name. Remove this task if you aren't using Sass
gulp.task('sass', function() {
return gulp.src('./app/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('./app'))
});
// initial compilation of the stylesheets, followed by initial set up Browsersync (which will handle the auto-reloading)
gulp.task('compile-and-serve', ['less', 'sass'], function() { // adjust (or remove) the prerequisite tasks if you're only using one (or neither) of LESS or Sass
browserSync.init({
server: {
baseDir: './app'
}
});
});
// this happens when you run `gulp`
gulp.task('default', ['compile-and-serve'], function() { // first compile LESS files, Sass files, and start Browsersync
gulp.watch('./app/**/*.less', ['less']); // if a change is made to a LESS file, recompile it. Remove this task if you aren't using LESS
gulp.watch('./app/**/*.scss', ['sass']); // if a change is made to a Sass file, recompile it Remove this task if you aren't using Sass
gulp.watch(['./app/**/*', '!./app/**/*.{less,scss}'], browserSync.reload); // adjust (or remove) the ! glob if you're only using one (or neither) of LESS or Sass
})
I have set up a gulpfile.js in my project. It's working pretty nicely mostly, except when it comes to generating source maps, especially for the LESS files it compiles to CSS.
I have put together a gist which contains all the files in my gulp setup. Please note that other than the gulp file.js itself, all the other files are inside a directory called tasks.
The problems I am having are that
I had to disable the autoprefixer in development because the source maps that were being generated were invalid as the autoprefixer modified the original CSS file after the source maps were generated. To compensate, I have added mixins that add the vendor prefixes during development, and I have to disable those for development and enable the autoprefixer for the production environment.
I am unable to generate a minified CSS file at all if I want source maps. The minification breaks the source maps.
Although I have LiveReload set up, and the associated browser plugins, I cannot get the CSS to get auto-injected into the page as I am making changes.
If anyone can help me structure my gulp file.js to work more efficiently and more effectively, I would appreciate it.
Again, my gulpfile.js and associated tasks are in this gist.
I had to disable the autoprefixer in development because the source maps that were being generated
The docs at https://www.npmjs.com/package/gulp-autoprefixer describe how to use the autoprefixer with gulp-sourcemaps:
gulp.task('default', function () {
return gulp.src('src/**/*.css')
.pipe(sourcemaps.init())
.pipe(autoprefixer())
.pipe(concat('all.css'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'));
});
The above create a new source map for all.css. So you should load the sourcemap generated by the less compiler first, see https://github.com/floridoo/gulp-sourcemaps#load-existing-source-maps
The docs of gulp-minify-css do not describe such an usage, but possible you can do:
gulp.task('minify-css', function() {
gulp.src('./static/css/*.css')
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(minifyCSS({keepBreaks:true}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./dist/'))
});
Notice that in most cases you minify only your code for production. Development code, which has source maps should not have to be minified.
Since version 2 of Less you can use plugins for the Less compiler. Also gulp-less allows you to use these plugins (programmatic) see also http://lesscss.org/usage/#plugins-using-a-plugin-in-code
Documentation of gulp-less describes how to use the clean-css and autoprefix plugin at https://github.com/plus3network/gulp-less#plugins. Notice that gulp-minify-css is leveraging clean-css's code too.
Also the usage of gulp-less with gulp-sourcemaps to create sourcemaps has been described at https://github.com/plus3network/gulp-less#source-maps
So you should be able to use:
var LessPluginCleanCSS = require("less-plugin-clean-css"),
cleancss = new LessPluginCleanCSS({advanced: true});
var LessPluginAutoPrefix = require('less-plugin-autoprefix'),
autoprefix= new LessPluginAutoPrefix({browsers: ["last 2 versions"]});
gulp.src('./less/**/*.less')
.pipe(sourcemaps.init())
.pipe(less({
plugins: [autoprefix, cleancss]
}))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('./public/css'));
The above should generate the autoprefixed and minified CSS of your Less source, with CSS sourcemaps written into ./public/css/maps
I want to use semantic-ui within ember-cli project, having trouble with including fonts.
bower install semantic-ui
Import css and fonts in Brocfile.js
app.import('bower_components/semantic-ui/dist/semantic.css');
app.import('bower_components/semantic-ui/dist/semantic.js');
var semanticFonts =
pickFiles('bower_components/semantic-ui/dist/themes/default/assets/fonts', {
srcDir: '/',
files: ['**/*'],
destDir: 'assets/themes/default/assets/fonts'
});
This works, because semantic.css looks for themes/default/assets/fonts relative to itself.
Note the destDir: 'assets/themes/default/assets/fonts', this is because ember-cli puts the semantic-css within assets/ folder, and I have to put the fonts in that folder. But this looks like a hack is there a better solution?
Finally semantic-ui dist folder doesn't include different build options, do I have to compile the project myself eg: using gulp?, I thought using bower it should be straightforward.
We also got 404's for the fonts after installing Semantic via Bower. We solved it by adding the font folder as a tree to the Ember build.var
EmberApp = require('ember-cli/lib/broccoli/ember-app');
var pickFiles = require('broccoli-static-compiler');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
babel: {
includePolyfill: true
},
fingerprint: {
extensions: ['js', 'css', /*'png', 'jpg', 'gif',*/ 'map']
}
});
app.import('bower_components/semantic/dist/semantic.css');
app.import('vendor/shims.js');
var semanticIcons = pickFiles('bower_components/semantic/dist/themes/default/assets/fonts', {
srcDir: '/',
destDir: '/assets/themes/default/assets/fonts'
});
return app.toTree([semanticIcons]);
};
Looking at semantic-ui, it seems pretty gigantic, and specifically setup with gulp.
First off, I would use the flag --save in your bower request.
bower install --save semantic-ui
This will add it as a dependency to your bower.json automatically - or --save-dev if it's only for development and not production.
Semantic-ui looks like it's written in "LESS", so not only do you have to deal with a favored build tool, but also it has opinions about the preprocessor.
The fonts involved seem to be just some google includes, and some svg fonts.
My advice, if you really really want to use a monstrous set of CSS declarations like this, - in this situation - would be to take the /dist output .css and .js -and- combine it with YOUR favorite css pre processing setup - and just override where appropriate. - or borrow the forms or whatever specific styles lead you to want to use this.
I am worried that fully integrating it into your ember project wont be as smooth as intended... and that you won't get a terribly useful amount of stuff out of keeping it in sync.
Just my opinion, - but I can't comment yet. - and I think you would be better off just writing the styles in stylus from scratch anyways. : )
I had the same problem.
I don't know if there's a better way, but I added the following line to the config/application.rb
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components', 'semantic-ui', 'dist')
This adds the dist folder to the asset path, so when semantic-ui is looking for /themes, it will be picked up.