I'm using grunt-contrib-compass to compile my SCSS files, and here's the Gruntfile configuration for the same.
compass: {
dist: {
options: {
watch: true,
imagesDir: 'web/assets/img',
sassDir: 'web/assets/scss',
cssDir: 'web/assets/css'
}
}
}
As you can see that I'm using Compass' "watch" option to watch for files for change. So all files within scss folder are compiled and eventually, one main file styles.css is generated within css folder. While I can use outputStyle: "compressed" option for Compass task to generate all CSS files minified, I want those files to remain expanded.
So is there anyway I can generate original files as expanded while an additional file .min.css which is compressed?
An alternative solution I have as of now is to avoid using watch of compass, and rely on grunt-contrib-watch and grunt-contrib-cssmin instead. But grunt-contrib-watch is much slower compared to that of Compass.
I cannot have another watch task running to monitor CSS files and run cssmin when they're changed, since starting compass with watch: true will block any other following tasks (unless I use something like Grunt-concurrent, which I want to avoid).
Any help is appreciated.
Related
There is a --style compressed argument for compile minified css (f.e. compiling minified css described here). But is it possible to compile .css AND .min.css at the same time?
Or I should create separate minify file watcher? (I tried to create 2 scss file watcher, one for .css and second for .min.css, but the second one replaced the first one, and I got only minified css).
Possible solutions:
Create 2 files watchers - SCSS->CSS and CSS->MIN.CSS. Use any available CSS uglifier for the second one - YUI Compressor, for example. See https://www.jetbrains.com/help/webstorm/2016.3/minifying-css.html
create a batch script that does the job (calls SCSS compiler for your .scss and then compresses the resultant CSS) and set it up as a file watcher
Use Gulp/Grunt tasks to compile and minify your files. You can either set up Gulp/Grunt as file watchers, or use Gulp/Grunt watch tasks
I want to use Laravel Elixir to minify my css/files files. But I don't want to use the mix-methode and merge them. All I want is to generate a "custom.min.js" file from my original "custom.js". Is there a way to do this with Elexir?
EDIT:
To make it a bit clearer: My biggest issue is that I have two folders in "resources/assets": js and css. So I basically want to minify all files in there and have them minified in "public/js" and "public/css".
Quote from the Laravel documentation:
Note: All tasks will assume a development environment, and will exclude minification. For production, use gulp --production.
This means if you want the files to be minified run gulp --production instead of just gulp. It's a better practise than enabling compression directly in the gulp file and makes sure you can debug your compiled files while developing the application.
If you want them to be placed in public/assets/css use the path as a second parameter:
mix.less('app.less', 'public/assets/css');
gulp --production.
Jeffrey way replied on the issue here: https://laracasts.com/discuss/channels/elixir/elixir-doesnt-minify
Or you can find it on the documentation. Enjoy coding!
If you just want to copy .css files, without using LESS or SASS, and don't want to combine files (i.e. you want something like a copy() method with minification ability) you can use method for combining, styles(), by calling it for every .css file and passing filename string without array, for example:
mix.styles('some.css');
mix.styles('node_modules/bootstrap/dist/css/bootstrap.css', null, './');
Same can be done for .js files using scripts() method:
mix.scripts('some.js');
mix.scripts('node_modules/bootstrap/dist/js/bootstrap.js', null, './');
And then you can use gulp (doesn't minify, creates .map files) or gulp --production (creates minified files) as mentioned in above posts.
Straight from the Laravel/Elixir docs:
Elixir is built on top of Gulp, so to run your Elixir tasks you only need to run the gulp command in your terminal. Adding the --production flag to the command will instruct Elixir to minify your CSS and JavaScript files:
Run all tasks... gulp
Run all tasks and minify all CSS and JavaScript... gulp --production
docs: https://laravel.com/docs/5.3/elixir#running-elixir
The angular generator has a dependency on compass and thus ruby when using SASS.
Two questions:
Is it possible/practical to remove the ruby dependency by using something like node-sass?
If so, how do I accomplish #1 and still use angular generator to generate controllers, routes, services, etc in the future?
If you are using the Yeoman Angular generator and you wish to use SASS/SCSS without depending on Ruby, you could use the grunt-sass Grunt module.
Yeoman is essentially a project set-up with Grunt so you can just add whichever Grunt modules you need. If you are unfamiliar with Grunt, you can read the documentation here.
Essentially, you can set up the Grunt configuration for your SASS task, then register the task in your generated project's Gruntfile.js:
grunt.initConfig({
sass: {
options: {
sourceMap: true
},
dist: {
files: {
'main.css': 'main.scss'
}
}
}
});
grunt.registerTask('default', ['sass']);
You should note that this Grunt module uses Node SASS for CSS compilation instead of Compass, so you may be missing out on some Compass mixins you may be used to.
As I am editing the sass task of my Gruntfile.js I don't understand the difference between the different properties (e.g. dist, dev and options) of the sass task object.
For example, in the code below the sass object contains two properties, options and dist. I have also seen a dev property in some other examples of the sass task.
sass: {
options: {
includePaths: ['bower_components/foundation/scss']
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'css/app.css': 'scss/app.scss',
// our component file on the right
// file to save on the left
'css/top-bar.css' : 'scss/topbar.scss'
}
}
},
At the grunt-sass Github documentation only the options property is discussed. There is no mention of dist and dev but I see that options can appear in dist and dev. Logic tells me that dist is for the final build and that dev is for development. I'm not sure though and also not sure how to use them. Any ideas?
When configuring a task, you can have many targets, like dist or dev (you can name them whatever you want). Each target can have its own settings, which obviously depends on the task.
I'm not sure which task you're using (maybe grunt-sass?), but the outermost options is probably applied to all targets.
See this part of Grunt's documentation.
There seem to be a few plugins...and I'm using webstorm file watcher which also precompiles individual files.
I think this may not be the best way to setup a watcher.
I'm running this command now:
sass --no-cache --update --stop-on-error --trace ./app/sass:./app/css
It seems to conflict with the webstorm file watch, which appears to be appending everything to base.css. Can someone tell me what exactly this command is doing vs. a sass filewatcher in webstorm?
What's the best way to work with sass:
precompile my sass to css using a grunt build task
and have file watchers while developing?
My base.sass looks like this:
#charset "UTF-8";
/* DO NOT EDIT FILES IN ./css. See ./sass instead */
#import "page";
#import "modal";
#import "nav";
#import "tables";
#import "forms";
#import "message";
Your command just compiles all files in diretory ./app/sass to CSS and put the resultant files to ./app/css. Default file watcher runs the following command:
sass --no-cache --update $FileName$:$FileNameWithoutExtension$.css
i.e. it takes the current file (the one that has been changed) as input and creates a .css in the same directory. But, as you have 'track only root files' option on (default settings), the watcher creates css for the root file only - the one that reference other files via imports. You can turn this option off to change the current behavior ans get css generated for other files as well.