How could one configure the preserveComments option when minifying assets (running gulp --production)? Is this something that we need to configure somewhere in the Elixir configuration files? Thanks!
I haven't found a suitable answer to this question, so I ended up changing one line in the following laravel-elixir file:
/node_modules/laravel-elixir/tasks/scripts.js
line 69:
.pipe($.if(config.production, $.uglify({compress: { drop_console: true }})))
TO
.pipe($.if(config.production, $.uglify({compress: { drop_console: true }, preserveComments: 'license'})))
Then run:
gulp --production
Note: instead of license value for the preserveComments option you can use any other described in the documentation: https://www.npmjs.com/package/gulp-uglify
Related
i have problem with compile less file.
In grunt config file themes.js i added
<theme>: {
area: 'frontend',
name: '<Vendor>/<theme>',
locale: 'de_DE',
files: [
'css/styles-m',
'css/styles-l'
],
dsl: 'less'
}
and when i use commend
grunt less:<theme>
i get
Destination pub/static/frontend/<Vendor>/<theme>/de_DE/css/styles-m.css not written because no source files were found.
I have _theme.less in folder web/css/source.
When i try make deploy it doesnt make file _theme.less in pub/static.
Where you have / did you actually insert the names of the vendor and theme? The error message includes / so I think what you posted above is literally what you put in the themes.js file.
And that is why it can't find those files.
If any error when using the grunt less command then first Execute the command.
grunt exec : pub/static/frontend
Then use command
grunt less : <theme>
Is there supported syntax to extend a .scss-lint.yml config file in the same way that you can extend a .jshintrc config file?
My goal is to pull all config files from a node package.
So a jshint would look something like this:
{
"extends": "./node_modules/npm-package-name/shared/.jshintrc",
"browser": true
}
I'm not sure how to pull off a scss-lint file.
Yes, it is possible through config-file setting:
Example:
options:
config-file: ./node_modules/#my-shared-repo/configuration/sass-lint.yml
convention: hyphenatedbem
rules:
class-name-format: 1
As of now this is not possible. A workaround solution is to create a symlink to the scss-lint file.
ln -s path/to/symlink/filename filename
All is in the title :)
How can I build css from sass file in vscode ?
In task file I just found lines for LESS not for SASS...
Thanks a lot !
I got it to work.
My root path has a /css folder underneath with my styles.scss file & the associated map file. I also had to fix my path for ruby. Once those two were working, my build showed an error where ruby couldn't find the scss file. So I fixed my task file - here is the working file. Notice the ${fileDirname} - that fixed the build errors for pathing.
{
"version": "0.1.0",
"command": "sass",
"args": ["${fileDirname}/styles.scss", "${fileDirname}/styles.css", "--trace"],
"isShellCommand": true
}
}
But this was just a test -- it doesn't watch and build more than 1 file as you would normally want to in a larger system. The docs for gulp/automation are here: https://code.visualstudio.com/Docs/languages/CSS
We don't have predefined problem matchers for SASS yet. You might want to open a feature request here https://code.visualstudio.com/Issues/List
But you can always create a problem matcher for SASS yourself. Have a look at the doc here: https://code.visualstudio.com/Docs/tasks#_defining-a-problem-matcher
The question is - how to force Laravel Elixir not to generate map files?
At the moment if I run gulp I will have generated app.css and app.css.map file. I don't know what for is this app.css.map file but I think it's not necessary for me at the moment. Question is - how to force gulp not to generate this file?
At the moment my gulpfile.js looks like this:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.sass('app.scss', 'public/css/app.css');
});
This is no longer achievable via elixir.extend() syntax, instead the official documentation now suggests to use this:
elixir.config.sourcemaps = false;
Starting from Elixir 3.0 you can put a JSON object that will override the default configuration in elixir.json:
{
"sourcemaps": false
}
.map files are called source maps. Their purpose is to map the contents of a concatenated, minified file to it's original files to make debugging easier.
You can disable them by changing elixirs config using extend() in your gulpfile
elixir.extend('sourcemaps', false);
Note that source maps are disabled by default when running in production.
I just can't get it work. I have a .scss file with some basic CSS.
Now, I have installed Ruby and I installed SASS like so - gem install sass.
What do I do to get it work on sublime?
I installed "SASS" so sublime acknowledge the .SCSS extension. I also installed SASS builder, and it actually works but in an strange way.
In addition to the compiled css file, it also adds .map file and a folder name .sass-cache.
Why Is that? How to I get rid of that? I don't need a .map file.
I also get an alert every single time the build is done. ("style.css has been compiled")
And not only that but I also get this comment at the end of my compiled CSS file:
/*# sourceMappingURL=style.css.map */
Please help, I'm lost.
Thanks in advance.
The .map file is for chrome (and maybe other browsers) to MAP your CSS that is rendered in the browser back to your actual SCSS. This is very very useful when debugging.
The scss-cache is just what it says it is a cache file that Sass uses. You can delete it but it will keep coming back every time you compile.
Once you go to production you can set Sass to not add any comments to your final css output file. You do this through a config.rb file if you are using compass.
Search on YouTube for LevelUp Tuts and Sass Compass install. Scott expanse how to get stared very well.
--sourcemap=none will disable the comment as well as the .map file creation. not so hard guys.
also, --no-cache will prevent creating the .sass-cache folder and its content.
Thanks anyway.
Try using SassBuilder for ST2. And you can config not to include comments, cache,etc with True/False.
{
"output_path": "../css",
"options": {
"cache": true,
"debug": false,
"line-comments": true,
"line-numbers": true,
"style": "nested"
}
}
For further info, click here.