While trying to execute grunt command.
I have used yeoman, bower, generator-angular and grunt with nodejs in windows 7.
Everything worked fine. And I have added font-awesome with bower-install, and to update my html I executed grunt wiredep.
it throws the following error.
Also my bower components are outside app folder, But in index file it started with bower_compontents/jquery/dist/jquery.js instead ../bower_components/jquery/dist/jquery.js.
The problem is with the node modules.
I just deleted it and executed npm install again. All worked well :-)
Change bower_components path
in .bowerrc file, I have changed the directory path. :-)
Related
I have project in made Laravel. In scss file I've made changes (font-size and color) but I don't know how the css file is generated. Because I can't see changes in css file.
In Laravel documentation I see that css is generated in this way: mix.sass('resources/sass/app.scss', 'public/css');
but I don't know how to run this command.
If you have installed node and npm in your machine and already run below command
npm install
Then you need to follow two step.
Step-1:In your project root folder,there is file name wbpack.mix.js or your/project/dir/wbpack.mix.js and you may edit this file as you want
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Step-2: After editing this file, you need to run this command
npm run dev
with this command compiling would be start and after ending,you may reload your browser to see the changes. cntrl+F5 for fresh loading.
Otherwise download node & install it,npm will came over with node. And run first command and follow those two step.
Tip: if you changes your scss file or js constanly for the time being, you may run this command
npm run watch
Because,if you have changes in your scss and js file,you need to run over and over npm run dev to recompile your code.But if you have run npm run watch, it will automatically recompile,whenever you hit cntrl+s.
Before compiling your CSS, install your project's frontend dependencies using the Node package manager (NPM):
npm install
Once the dependencies have been installed using npm install, you can compile your SASS files to plain CSS using Laravel Mix. The npm run dev command will process the instructions in your webpack.mix.js file.
npm run dev
Sass is throwing an error on multiple projects on both of my computers when I try to compile the scss files to css. I'm using dart-sass. I'm typing the command in the terminal from the root of the projects and the file path is correct. I've tried both
sass --watch src/styles/scss:src/styles/css
and also just
sass src/styles/scss:src/styles/css
but the results are the same:
Error reading src/styles/scss:src/styles/css: no such file or directory.
As such I can't compile any of my style files.
filename is required to select directory
Try this sass --watch src/styles/scss/fileName.scss:src/styles/css
Okay, I figured out a solution if anyone else runs into this problem. You should uninstall dart sass from your computer(prefix this command with sudo if using mac):
npm uninstall sass -g
Then, install a stable version of ruby sass:
gem install sass
Now you should be able to run sass --watch src/styles/scss:src/styles/css and it will compile.
Note: If you were to do npm install sass that would install the latest version written in dart, which is what seems to have caused my problems.
In the terminal, I had to make my way to the file location and then run the command. Example:
Project Structure:
src
abc
prq
main.html
main.scss
When I launch the terminal, it defaults to src folder
PS C:\Users\src> sass --watch main.scss:main.css
Running command here will throw error:
Error reading main.scss: no such file or directory.
Now, browsing to prq directory & running command, will be successful.
PS C:\Users\src\abc\pqr> sass --watch main.scss:main.css
Compiled main.scss to main.css.
Sass is watching for changes. Press Ctrl-C to stop.
My gruntfile.js has been created by Yeoman angular-generator. When I run this in development site using grunt serve, it works fine, but using grunt serve:dist it does not work. The site is opened but views link do not work only Home link works, I think it is because other view templates are not reachable.
Gives following error after running grunt serve:dist
Running "ngtemplates:dist" (ngtemplates) task
File .tmp/templateCache.js created.
Usemin has not created uglify.generated yet!
My Gruntfile.js is below:
https://github.com/charutiwari04/dashboard/blob/master/Gruntfile.js
Can anybody help me on this?
I am completely new to all this, 'Bower' and 'Gulp' and Laravel 'Elixir'. I purchased a template that uses them (unfortunately) and now I need some help on how to go about implementing them. I have already installed NPM and Bower. All my packages have been downloaded into:
resources > assets > vendor
This is a screenshot:
Now my question is how do I include all those packages I downloaded in my view? From my understanding I can't run less files directly in the browser, it only runs once due to 'browser caching' or something like that, also the JS scripts are just too many to include in my page.
I want a way where I can work on my files and have them automatically compiled with the compiled files being referenced in my app.php file.
This is a link to the GulpJS file included in my template: http://pastebin.com/3PSN6NZY
You do not need to compile every time someone visits. The compiled sass/js should be run in dev and then the output files referenced.
If you have gulp installed on the project, you should see a gulp.js file in the root of your project. If not, visit here for instructions:
Gulp/Elixer installation and setup
In your gulp.js file:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.less([
'app.less',
'normalize.less',
'some-other-less.less',
'and-another.less'
]);
mix.scripts(['app.js', 'some-other-js.js'], 'public/js/output-file.js');
});
While in development you can run gulp watch from the command line to listen for changes and run compile tasks when it hears a change. Then you simply reference the output files in the public directory as you normally would.
If you don't want to listen, you can just run the gulp command for a single once-off task run.
The docs are pretty straight forward and can be found here:
Gulp/Elixer docs
I am running grunt server after a clean install of Yeoman, using the Webapp generator and I get the following error:
Warning: Errno::ENOENT on line 441 of /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ruby/1.8/pathname.rb: No such file or directory - /Users/nfento/Sites/test/app/bower_components
Run with --trace to see the full backtrace Use --force to continue.
Any idea what would be causing this? I have been able to reproduce the error on two machines. I'm completely new to using grunt, but have used it as a server with livereload previously.
Maybe is a bit late but:
check if you have a app/bower_components folder
if not check if there is a bower_components folder in the root
if it exists move it in the /app folder
create a file .bowerrcand paste this in:
{"directory": "app/bower_components"}