I have to say that writing javascript programs has become more and more complicated this year. Although we all created frameworks and tools to make writing JavaScript easier, we feel that we have begun to deviate from the original goal.
Today, Yeoman is a tool created by a group of people to make angularjs programs more intelligent. You can use simple command line operations to help you initialize an angular app. CSS, images, views, and JS should all help you decide where to put them, and even the complex grunt will help you configure them. Front-end comrades only need to use "grunt serve" to preview your web app without configuring the web server, you can use "grunt build" to export compressed CSS, HTML, JS, and even images. It's cool to change the path for you!
But! When you decide to use it, you need to know the following points:
- Configuration is troublesome. New machines need to be installed:
- Node. JS & NPM
- Grunt CLI
- Bower
- Git bash
- Some Mac servers need to install a karma NPM package globally.
I have forgotten the package name for this question. However, when I ran grunt test for a unit test, I always reported that the karma task could not be found, it was finally solved by finding a dude's suggestion on stackoverflow.
- Yeoman
- The corresponding generator package. For example, angular uses the generator-angular package.
All the above except node and git can be completed using the NPM command. Many NPM package sources are on GitHub, so it is easy to get a cup of cake if the network is poor.
After installation, use the yo command to initialize the project. Based on your options, the bower install and NPM intall commands will be run to automatically obtain the dependent packages of the project. However, based on my experience several times, I often encounter a strange problem and cause a failure. Then I have to manually run the bower install and NPM install commands ...... This configuration process is really long.
- If you want to modify gruntfile without the paths initialized by Yeoman. According to the content of gruntfile, you can know when the grunt build compresses and exports files:
- Files in/APP/styles/font will be copied to/Dist/fonts, and SVG files will be compressed, but files in subdirectories are not recognized
- The image files in/APP/images will be compressed and copied to/Dist/images, but the formats are filtered.
- HTML only compresses and Copies files in/APP root directory and/APP/views directory and Its subdirectories.
- CSS and jsare the code of your reference file in index.html and the compressed and merged target file configured with annotations.
- Among them, the bowerobtained packet will be written to index.html for the introduction of JS and CSS by a grunttask using your bower.js.
When I changed gruntfile, I once again threw myself to Google's comrades ...... I have not written such a long grunt configuration file
- Note the need to copy and paste the transfer project.
Copy the project folder to another machine. It is best not to include the node_components folder. Copy the folder and run the NPM install command again to ensure that the program can run.
Copying and deleting the node_components folder on a Windows machine is likely to encounter a very subtle problem because of the long path or long file name.
In addition, the node_components folder is really large. It would have taken 10 minutes to compress the folder and delete the compressed file ......
- File Path Problems:
- As mentioned above, files in/APP/styles/font will be copied to/Dist/fonts, resulting in changes to the font file path.
Yeoman uses grunt-usemin to scan and change the path in the file, but the default configuration is to use <! -- Build:... --> <! -- Endbuild --> the files marked as package are copied to the specified path for processing.
That is to say, you do not place the reference of CSS and Js in this tag. During build, this file will not be exported to the DIST folder or compressed into a file, it does not automatically change the path referenced by the font file in the file.
- After you observe javasindex.html, you can find that the file referenced by Bower starts with "bower_compoenents/", and the CSS file path in/APP/styles starts with "styles, the path of the JS file in/APP/scripts starts with "scripts.
The problem arises. You are using grunt to run your app, because people have configured a lot of grunt tasks to process the path. If it is necessary for backend developers to add and modify your code source files on their machines when working with the front-end developers, it will be troublesome ......
- When running yo angular to initialize the angular project, you will first ask if you want to use sass, and then ask if you want to use Bootstrap.
- Slot 1: Well, although I personally prefer sass, bootstrap provides better support for less. Does sass seem to have no documentation?
- Slot 2: The result uses the CSS version of Bootstrap under the bower intelligence, neither sass nor less.
- Slot 3: Bootstrap JS does not support angular well. You have to create angular-Bootstrap from angular-UI.
Conclusion: There are advantages and disadvantages. The key is to look at your own needs. If it is just a simple project, it is not necessary to use it. If you have any mistakes, please correct them!
You must know how to use Yeoman.
