I'm new to the Yeoman/Grunt/Bower stack and I'm unsure if there is a proper way to remove a component/task from my project. I don't use CoffeeScript (which was packaged with the Yeoman generator) and it feels like I should be using a Grunt task or Bower command to remove the files/requirements/config/etc.
However, I can't find anything mentioning how to do this. Am I missing something or should I just remove the components by hand?
I don't believe there is an automated way of doing this; save for https://github.com/indieisaconcept/grunt-plugin but that's for the old release (0.3.9) of Grunt.
For Grunt tasks, simply remove the line in devDependencies in package.json and then remove the relevant section in grunt.initConfig and you will have uninstalled the plugin. Depending on how your Gruntfile looks, you may have to remove the grunt.loadNpmTasks(<package>) section for the relevant plugin. Then remove the directory in node_modules (or run npm uninstall <package>). Simple really.
Bower is even easier; remove the relevant line in bower.json and delete the directory it was installed (the default is bower_components).
Hope this helps. :)
You can remove a Grunt task by running the following command:
npm uninstall grunt-task-name --save
...where grunt-task-name is the name of the task you want to remove. The --save flag tells npm to update your package.json file as well as deleting the relevant package from your node_modules directory. (nb. if the task is listed under devDependencies - as it might well be - you might need to use the --save-dev flag instead).
For Bower the process is the same, only with bower uninstall instead of npm uninstall (as mentioned in Michael Onikienko's answer)
For Bower components:
bower uninstall componentName --save
This command will uninstall component from bower.json and from bower_components folder.
Related
I have a Symfony3 project and want to use SASS for my stylesheets.
I have looked up many pages and found Assetic related threads - but no "real" explanation, how to integrate SASS in a Symfony3 project.
Can't be too difficult, can it?
I would be glad to hear any hint or complete "how to" - thanks a bunch!
I create a separate frontend build process using NPM for this which can handle all images, SASS/CSS, and JS with compression etc. and then add a build step to generate everything.
If you don't have NPM, follow instructions to install: https://www.npmjs.com/get-npm
Initialise the project by running npm init in your project directory.
Install some tools for compiling and compressing:
npm install node-sass --save-dev this compiles SASS to CSS
npm install postcss-cli --save-dev this processes compiled CSS
npm install cssnano --save-dev this minifies CSS and is used as a plugin for postcss
npm install autoprefixer --save-dev this adds moz, webkit and vendor prefixes and is used as a plugin for postcss
npm install npm-run-all --save-dev this isn't strictly necessary but allows you to group commands which is helpful as you add more steps.
Once you've got these dependencies installed, you can add your build scripts. Open package.json and modify the scripts key.
{
"name": "your-project-name",
...
"scripts": {
"build-task:scss-compile": "node-sass --source-map true app/Resources/sass/app.sass -o web/css",
"build-task:css-minify": "postcss web/css/app.css --use cssnano autoprefixer -d web/css",
"build": "npm-run-all -p build-task:*"
},
...
}
You can now run npm run build. build-task:scss-compile will compile your SASS into a single, uncompressed CSS file in the web/css directory which can be linked to in your templates. Then build-task:css-minify will compress it and add any vendor prefixes to the CSS.
You can add more build tasks as mentioned above and chain them in this way. You can also add file watchers and a watch command which will run the build scripts when any watched files are modified.
Don't forget to add node_modules to your .gitignore file.
The reason I opt for a separate process over something like Assetic and leafo/scss as outlined in the Symfony docs is that Assetic filters add a lot of overhead to responses as they compress things on the fly which will slow down development considerably. It also separates concerns between application and presentation and gives you more flexibility to later build on and adapt your front end without touching your application.
EDIT: Here is a gist of a package.json file that will also copy jQuery, FontAwesome, anything in the assets directory including any images or fonts, compile and minify JavaScripts, after checking them for errors and create required directories if they don't already exist and a file watcher for building when files are modified:
https://gist.github.com/matt-halliday/6b9a3a015b7a87c5b165ce1a9ae19c9b
What I want to do is simply have a tool that can watch and auto prefix my css. Previously I was using pleeease.io, it is very straightforward for beginners like me, after install it through npm, what I need to do is to create an option file(.pleeeaserc), then do
pleeease watch
Afterwards, I can focus on my css, every time I make change to my css file, it gets processed and output.
Unfortunately it seems the author has stopped maintaining it, when I do
npm install pleeease
on my new server I got lots of errors and the installation failed.
I guess it is time for me to learn how to directly use autoprefixer, which I believe pleeease integrates as one of its dependencies.
However, I find the learning curve is a little too much for me: To use autoprefixer, I need to learn PostCSS; and PostCSS usually runs with Grunt or Gulp; to use task runners, I need to know something about npm and node.js. I know these are all useful tools which can save lots of my time, with them I can do much more than just autoprefixing. I will make deep dive into them later but under my current pressure I really need some shortcut like pleeease to get autoprefixer up and running, without having to digest all the documents and articles about PostCSS. I hope I can do something like
[postcss|autoprefixer|something else] watch
under my scss folder and every time I make change to and save input.scss, a output.scss file will be generated.
So I have some questions, in part of my effort on learning PostCSS and/or getting autoprefixer work as easy as possible:
1) To clarify, what is the relationship between PostCSS and PostCSS-cli? Does the latter depend on or include the former?
2) And does installing the latter merely enable the ability to use postcss command in command-line interface?
3) I did npm install -g postcss-cli but I still can't use postcss command, what did I do wrong?
4) To watch file change and automatically compile, do I need to use task runners like Grunt or Gulp along with PostCSS?
5) What is the difference between npm install postcss and npm install grunt-postcss?
"What I want to do is simply have a tool that can watch and auto prefix my css."
Yes you can do this easily with gulp, which you can get up and running in minutes. There are plenty of "getting started" walkthroughs online. You don't really need to know anything about PostCSS to use autoprefixer. This task below will compile all your sass, run autoprefixer and output a corresponding CSS file anytime you save a .scss file:
gulpfile.js
var gulp = require('gulp'),
$ = require('gulp-load-plugins')();
gulp.task('watch', () => {
gulp.watch('src/**/*.scss', ['sass']);
});
gulp.task('sass', () => {
return gulp.src('src/**/*.scss')
.pipe($.sass())
.pipe($.autoprefixer())
.pipe(gulp.dest('dest'));
});
1) To clarify, what is the relationship between PostCSS and PostCSS-cli? Does the latter depend on or include the former?
The answer to question 5 partly answer this question to what postcss is used for. The other is intended to be ran from the command line. PostCSS-cli is a binary, the other is an NPM package written in Javascript.
2) And does installing the latter merely enable the ability to use postcss command in command-line interface?
Yes.
3) I did npm install -g postcss-cli but I still can't use postcss command, what did I do wrong?
It's better to install locally like so:
npm i postcss-cli --save-dev
Then you can use like so:
node_modules/postcss-cli/bin/postcss -c config.json
Or, add a script in package.json like so:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "node_modules/postcss-cli/bin/postcss -c config.json",
"watch": "node_modules/postcss-cli/bin/postcss -c config.json -w",
"minify": "node_modules/postcss-cli/bin/postcss -c config-minify.json"
},
Note: Relative paths are not required in the scripts section. I put them in to show local usage of postcss-cli. You could simply use:
...
"build": "postcss -c config.json"
...
You can then run:
npm run build
4) To watch file change and automatically compile, do I need to use task runners like Grunt or Gulp along with PostCSS?
Nope. PostCSS-cli can do this:
node_modules/postcss-cli/bin/postcss -c config.json -w
Or, add as script to package.json as can be seen in my example above. Then you just run:
npm run watch
5) What is the difference between npm install postcss and npm install grunt-postcss?
The later is used for gulp, the former is used to build grunt-postcss, postcss-brunch etc.
To use autoprefixer with postcss-cli on the command line you do:
postcss --use autoprefixer --autoprefixer.browsers "> 5%" -o output.css input.css
This is listed in the docs and is pretty easy to follow.
When I want to set "Underscore" (I used to use 'Grunt') and I put in .jshintrc.
"globals": {
"_": false,
Now with version 3.5.1 of Jhipster I use Gulp and I do not know how to configure it because there is no file .jshintrc.
Ans it gives me the error
angular.js:13550 ReferenceError: _ is not defined
Can somebody help me. Thank you.
JHipster replaced jshint with eslint in this change. Because of this, you should add the globals section to the file .eslintrc.json the same as it was in .jshintrc. (Similar issue)
Based on the ReferenceError from Angular, it looks like you don't have Underscore as a dependency in your index.html. Run bower install underscore --save to download and install Underscore (this adds it to bower.json), then run gulp inject:dep to inject the dependencies to index.html automatically.
I'm trying to get Polymer 0.9 working with Meteor however Meteor is spitting out:
While building the application:
bower_components/polymer/polymer-micro.html:9: bad formatting in HTML template
bower_components/polymer/polymer-mini.html:9: bad formatting in HTML template
bower_components/polymer/polymer.html:17: bad formatting in HTML template
=> Your application has errors. Waiting for file change.
Is there any way to resolve the issue?
You should place the components in public/ at the root of your project.
I've had the same problems. I can't tell if you're using vulcanize, but I assume so.
What fixed me was:
Install Bower: npm install -g bower (bower.org)
Create a file in the root of the project called .bowerrc
Then, you want to tell bower where to install polymer components.
In that .bowerrc put:
{
"directory": "public/bower_components"
}
Now, use bower to install polymer
bower install --save Polymer/polymer#^1.2.0
If you're using other parts of polymer like paper and iron, you'll repeat the bower install step for those as well.
Then attempt starting up meteor again.
In my meteor project I want to use gulp for tasks meteor doesn't support.
Anyway, the problem is that gulp uses a file called gulpfile.js which is loaded by meteor too and gives errors. So my question is, is there a way to tell meteor to ignore some files ?
UPDATE: One solution I can think of is to put gulpfile.js in the folder packages or public and run gulp as follows
$> gulp --gulpfile packages/gulpfile.js
UPDATE: Just noticed that meteor also seems to load node_modules files :(
Unfortunately, in the current release there's no way to tell Meteor to leave certain files alone, so you cannot have gulpfile.js in your main app folder.
You can, however, leave it in an ignored subfolder. Meteor ignores files and directories that ends with tilde ~, the /tests directory and all private files (those beginning with a dot .). So you can create a folder named for example gulp~ and use it for your gulp-related stuff.
The same holds for node_modules folder, you cannot have it in your application, and you shouldn't. If you want to use a node package in your Meteor application, you can do this with npm package.
Add it to your project with mrt add npm command.
Then create packages.json file with a list of all required packages, for example:
{
"something": "1.5.0",
"something-else": "0.9.11"
}
Afterwards, include your package with Meteor.require:
var something = Meteor.require('something');
If you want to use a node package in your gulp tasks, install it inside the ignored directory.