I used ui-router, when the file is not minifed or when I used the already minified file everything is working.
But I have a gulp task that takes all the library and minify them using "uglify()" (this is necessary because some of the library doesn't have a minified version.
So my question is: Do you know why uglify() doesn't work with UI-router
The error I get is:
d.get is not a function
at < a ui-sref="flight" class="ng-scope">
I had the same issue one time, use the mangle option:
.pipe(uglify({ mangle: false }))
It's not ideal because the files won't be as minified as possible but it's working for me
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 have a folder of SCSS files. The main SCSS file is /css/app.scss. It imports all the other SCSS files, like /css/variables.scss and /css/component_a.scss.
How can I have sass watch my /css/ folder for any changes, then recompile starting from /css/app.scss?
Right now it errors since /css/component_a.scss uses variables defined in a different file. But in app.scss they are imported in the correct order.
My answer may be limited because I don't have all the information about how you are compiling sass and what settings you are using.
However I can see that your file names aren't prefixed with an underscore, basically sass will compile every file individually that doesn't have the '_' prefix.
Basically what you want to do is set up your task manager (grunt, gulp, etc) to watch all files ending with '.scss' then tell it to run the sass compile task and have this pointed at your app.scss file.
With the limited information I have from your question I hope that my answer points you in the right direction to solve your problem.
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
So I made a library that I can bower install using a direct link. I can use this library from another internal application by adding the library name in the dependency of the bower.json file. When other internal application does a bower update, the changes I made on the library will be applied to their application. This part is working very well.
Now, I'd like the other software devs to have freedom to change the styles. They can create css file directly and that will work. However, it's a hackish route. I can provide them the same settings file that I use.
So i tried putting that file in the main section of the bower.json but wiredep is processing it. I put it in exclude and the error is gone when I run gulp.
"main": [
"dist/stylesheet.css",
"src/_settings.scss"
],
this is the code that prevented it from being parsed by wiredep
wiredep: {
directory: 'bower_components',
exclude: ['css/foundation.css','src/_settings.scss']
}
Am I right that I'll have to create a new gulp task and put 'src/_settings.scss' as gulp.src like this
gulp.task('sasstask2', function () {
return gulp.src('src/_settings.scss')
.pipe($.sass())
.pipe(gulp.dest('src/css'));
});
I also like the generate css to be injected to index.html but not sure how to do it? Will wiredep automatically inject it to index.html?
I am looking into upgrading brunch to latest version of 1.7.1, but am running into trouble with my mocha tests not being run. Tracked this down to that "window.require('x_test')" at the end of test.js not being generated anymore. Tried renaming my test files from 'x_test.coffee' to 'x-test.coffee' (replacing underscore with dash), to no avail, as the docs indicate that suffix -test will be treated as test according to brunch conventions.
Any ideas?
Additional info: The support disappears between versions 1.5.4 and 1.6.7.
An answer to this question can be found on GitHub: https://github.com/brunch/brunch/issues/726
In short, where you find mocha.run() (in my case, index.html):
<script>
$(function() {
window.require.list().filter(function (name) {return /test$/.test(name);}).forEach(require);
mocha.run();
});
</script>
This executes all javascript/coffeescript files ending with test, hence register the tests they contain, which mocha.run() will subsequently run.