With the default version of sails on npm (v.9?) --linker works ok i.e. creates /linker folder. I can copy js, css files to assets/linker/ and they appear in layout.ejs automatically.
I now have sails v0.10 installed both locally and globally. Using Node V0.10.25.
I created a new sails project using:
sails new project_name --linker
but no /linker folder is created.
I had to create /.tmp as it did not exist
I had to create /.tmp/public/linker/ to put /js & /styles
and add them manually into layout.ejs
I renamed Gruntfile.js and my program still works thus Gruntfile does nothing in the program.
Sails v0.10 no longer uses the linker folder--it was just causing confusion. If you have the linker option enabled, then any assets under your assets folder will be copied over to your .tmp/public folder by Grunt when Sails is lifted. The public folder will be created by Grunt as necessary. The grunt-sync task will then keep the folders synced as long as the program is running.
Sails projects are not dependent on Grunt, so renaming the Gruntfile (or removing it completely) won't stop the program from working, but that doesn't mean it's not doing anything when it's there! To see what Grunt is up to, you can lift Sails with sails lift --verbose.
As an add-on to sgress454's answer, the reason a .tmp folder is created is so that files like the ejs and less files can be compiled into formats that your browser will understand. It's similar to the way that when you compile Java, it converts to Java bytecode (just an analogy, definitely not the same process).There doesn't necessarily have to be any .tmp folder when you're not running the server though; this is something Grunt creates and is what the browser reads from. Hope this clarifies things a bit more.
Related
I have a project using VueJS, Webpack and some JS Plugins, like Jquery Datatable.
Everything goes well, i have a package.json where has all depedences. Here we a team with 10 developers. Not all of them work with this project, there are some developers that touch in this project every month. They already have all project, nothing changes with package.json dependences, but when i build the project, there are some strange errors in terminal, like not found some dependences(?) even all folders being there. Nothing changed with node_modules folder. If i delete it and run npm install, it works. The question is: "Why does the folder node_modules "lose" the references when it is a long time without moving the object?"
Thanks!
The "deployment process" in our company (if you can even call it that) is that you usually (not always) make the site locally, then upload it to the server and after that do all changes on live server (yep...).
I am trying to push SASS in our company, but my boss basically told me that if there isn't a way for it to autocompile after a change has been made on the server, I can just throw away all my work reworking our styles to SASS and go back to pure CSS.
Here is folder structure sample of our server (we do have multiple sites running on same machine, they're all in separate sub-folders, but not all of them have frontends):
var/www/our_system/project_name1/web-frontend/frontend_name1
var/www/our_system/project_name1/web-frontend/frontend_name2
var/www/our_system/project_name2/web-frontend/frontend_name1
var/www/our_system/project_name3/web-frontend/
The frontend_nameX contains a style folder which contains folders scss and css (where I want to autocompile contents of scss into the css folder).
So, the question again:
Is there a way, to have SASS permanently watch over any sass file changes and compile them to a css folder relative to the sass folder the compiled file was in (as my boss doesn't want to run watch command for every single website)? Also, it would be amazing if it could also run the CSS through Autoprefixer.
Thanks.
Ps.: We are using our own custom CRM/CMS written in PHP, there are no other frameworks etc. Front-ends are also written in PHP and HTML (no react, node, anything of sorts). Our server runs on Debian Jessie (and for PHP we use Apache).
Ps.2: Please, do not tell me that we are doing it wrong etc. I KNOW, but I can't do anything about it.
Edit:
I got my boss to try and install Gulp on our server to take care of this, but the installation itself actually failed.
The node was installed fine, same with npm (well, I think it threw some warnings, but got installed), but gulp just threw warnings and errored out (it installed fine globally, but died when installing for the project)...
The new question is, is the gulp way to go?
All we need is something that autostarts and keeps watching all scss files and parses them when they change.
Thanks.
I know that could be multiple answers for this question but I would know how i can fast setting up project with Bootstrap and Sass.
I had never used node, npm, grunt or bower, I've installed all already but i can't really find a good tutorial for:
Setting up the project structure
Auto compile sass files on save
(Maybe) Live reload in chrome?
I would suggest not using any boilerplate for your first project as you want to get into the "guts" of it, and once you are familiar with basics, then you can try boilerplate and see what they can do for you.
Few tools you would need to setup a project from scratch includes: Node's npm, Bower, Gulp (for example).
After you have those installed, you can dig in into creating your first project.
1) Initialize your npm project
2) Pull the packages with Bower (Bootstrap scss for starters)
2a) Pull the Specific Bootstrap 3 SCSS port
3) Configure Basic Gulp-scss config for your SCSS needs.
Basic idea behind Bower is that you have unmodified source of plugins/3rd party js/css in bower_components folder, and you use those files to compile a production ready files (js/css). What this means is that your bower_components folder is a "src" folder, and you have to add your "dist" or distributable files. Gulp helps with this part.
For the project structure, further readings and improvements on gulp tasks.
Once you have basic working project, you can try expanding your gulp-config with, like you mentioned Browser Sync and others.
I did compile a "general tasks" gulp file that i use from project to project. You can take a look here and use it if you find it fits.
Hope it helps.
You can try using Aldryn's boilerplate:
https://github.com/aldryn/aldryn-boilerplate-bootstrap3
Documentation
I am a beginner to mean.
I have followed the following steps to create meanjs app :
installed node v0.12.7
npm install -g bower
npm install -g grunt-cli
npm install -g yo
npm install -g generator-meanjs
cd C:\Users\SHIVAM\Desktop\MyApp
yo meanjs
MyApp folder containing mean directory created
Error occured on yo meanjs 1
Please provide a solution . I am struck at the first phase. I need to get started as sson as possible .
Version 0.4.* has different folder structure. The tutorial you are following is probably using earlier version of meanjs. You can find the new structure here-http://www.bossable.com/954/version-0-4-0/ She has compared the structure with the older one. I was going through the same problem. Follow these tutorials, it will be of great help.
The following directories have been changed in the 0.4.* versions of Meanjs; 0.4.2 is still unstable. 0.4.0 and 0.4.1 is recommended for beginners to get on MEAN.
-New files have been added
1) gulpfile.js-Gulp is relatively faster than grunt because gulp focuses on code rather than cofiguration. It uses node.js’ streams, and executes faster, since it does not open/close files, or create intermediary copies all the time. The lack of any up-front configuration, especially, specifying a source and destination is noticed immediately in this file.
2) protractor.conf.js-Support file for end-to-end testing in angularjs applications. (Pretty Neat.)
The app folder is removed, which is the major concern for the noobs trying their hands on MEANjs following the older tutorials. Controllers,views, models are now moved into a separate folder called modules which was previously in the public folder.
You can explore modules/core/server and modules/user/server of your project
Addition of client, server and test in modules/core and modules/user folder. All the client side angular will now be in the modules/core/client making it easier to access all services and directives of different modules of the application at one place. And all the backend or server-side files goes to modules/core/server.
public/application.js and public/config.js are now config.js and init.js in modules/core/client/app folder.
config folder is split and new folders assets and lib are added.
The previous env folder have been split into env and assets. All the references, mongodb port, session keys goes to the environment(env) whereas new libraries we are defining into our project goes to assets. For instance new css, sass or less reference will be defined into asset/default.js. config.js and init.js are merged into one file config/config.js.
lib contains express.js, mongoose.js and socket.io.js.
node_modules is pretty much exactly the same as the previous versions of meanjs.
These are the major changes in the folder structure. New models and controllers are added into the modules/users/server according to your application, just so you don't get lost while developing your project.
So I have created a pretty default keystoneJS project and the first error that appeared was that when ran locally the website's default css won't load.
It's looking for site.min.css but in the folder there is only site.scss
After I compiled the scss via sublime text 2 sublimeBuild and renamed the file to site.min.css (from site.css) it ran perfectly but what worries me is why does the default installation have this error.
Where should I change this? Is there an scss builder included so I have to change folder naming or is there some other issue?
My guess is that it has something to do with some step skipped. I remember the keystone installation asked me whether I wanted to use sass so I suppose everything should be ok.
Is the problem because I did not use grunt somehow?
I recall reading somewhere that this grunt tool has to be used instead of node when running a server and I see a Gruntfile in my folder but when installed grunt-cli the grunt just loads and terminates the server right after that.
You don't have to do anything, sass-middleware is included and automatically generates CSS files from your SASS source files when they're requested.
The issue you were experiencing with site.min.css not being found was an error in the yeoman generator, from when the SASS support was added. The LESS middleware automatically compresses generated CSS when a request is made for a file ending in .min.css, but the SASS middleware doesn't do the same, so the request was 404'ing.
The problem with the yeoman generator has been fixed as of version 0.2.9, for existing projects the simple fix is to change your layout file so it refers to site.css instead of site.min.css.
Once you do that the middleware will automatically detect the presence of site.scss and generate an up-to-date version of site.css for you.