Yeoman installation

Use Yeoman to generate project files and code structures during the project initiation phase of a Web project.

Provide a suite of tools to automate the development process for code validation, testing, and compression

Yeoman’s official website

npm install -g yo

Generator needs to be installed

run

yo -v

Follow the steps. If the error cannot be found, you will need to manually install the generator.

For example, using Angular projects:

    
npm install -g  generator-angular

Official generator

Bower installation

Versioning of library files

npm install bower

Grunt installation

Automation, compression, compilation, unit testing, code validation

npm install grunt-cli
npm install grunt

Yeoman creates the project

Take Angular as an example:

Yo angular myanuglar // Created

Yeoman is a project file built on top of Node

Bower application

Bower is a package manager for the Web. The source code of the packages Bower manages is hosted on GitHub, so use git command line control to use directives as much as possible. The default directory is: bower_components

bower install jquery

To install packages in other ways:

1: GitHub short name

bower install jquery/jquery

2: Use the full GitHub directory to install

bower install https://github.com/jquery/jquery.git

3: Install directly through the URL

Bower install http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js

When using search: jQuery owner: jQuery queries the current project developed by the team.

Generate bower.json configuration files

bower init

Bower. json where devDependencies field development environment

Bower install angular --save -- dev // Add field to build environment bower install angular --save // Add field to build environment.

Bower needs to be used in conjunction with Grunt, which alone is limited to the package’s reference path troubles.

Grunt use

Three basic concepts: task, target, and options

Gruntfile. Js file:

module.exports = function(grunt){ require('time-grunt')(grunt); require('load-grunt-tasks')(grunt); Let config = {app: 'app', dist: 'dist'}; let config = {app: 'app', dist: 'dist'}; { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'app/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } jshint: { files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'], options: {globals: {jQuery: true}}} // Compiles Less Less: {build: {expand: true, // Compiles CWD: SRC: '['*.less']', dist: 'CSS /', ext: *.less', SRC: '['*.less']', dist:' CSS /', ext: '.css'}}, sass: {build: {expand: true, // Build CWD: 'sass/', // All files specified in 'SRC' are relative to the path specified in this property SRC: '['*.scss']', // This place matches all the less files dist: 'sass/', ext: '.css'}}, // Concat: {options: {// Define a character that is used to insert separator between merged output files: '; '}, dist: {/ / will be merged file SRC: [' SRC / * * / *. Js], / / the merged js file location / / dest: 'dist / < % = PKG. The name % > js' dest: 'dist/libs.js'}} // Watch: {files: ['less/**/*.less'], // Listen to all the less files in the 'less/**/*.less' folder and all the files in the 'less 'directory. ['default'] // This task will be executed if the file being listened on has changed}}); // Enable task grunt.registerTask('default', ['less']); }