Angular1 is used in combination with gulp and bower, angular1gulpbower
1. Install gulp and bower
Install gulp: npm install-g gulp
Install: npm install-g bower
= Note: = Some angularjs package files are managed through bower.
Two bower usage
- Use bower to initialize a project: bower init
- Enter the project name, description, and so on.
- Install angularjs: bower install -- save angular
- Create a. bowerrc file (note that it is best to use the command line to create a window)
Use of three automation tools gulp
- Initialization File: npm init (always press Enter)
- Install gulp: npm I -- save-dev gulp in the project
- Install the dependency plug-ins of gulp (only used in the project) gulp-clean, gulp-concat, gulp-connect, gulp-cssmin, gulp-imagemin, gulp-less, gulp-load-plugins, gulp-uglif, and open (you can install gulp like the above)
- Create gulpfile. js to compile gulp configurations
// Dependent on var gulp = require ('gulp'); // instantiate (the following code can be used to operate the gulp-load-plugins module) var $ = require ('Gulp-load-ins ins') (); // open Module var open = require ('open'); var app = {srcPath: 'src/', // source code path devPath: 'build/', // integrated path, development path prdPath: 'dist/'// production environment path }; // create the task gulp. task ('lib', function () {gulp. src ('bower _ components /**/*. js '). pipe (gulp. dest (app. devPath + 'upload ')). pipe (gulp. dest (app. prdPath + 'upload ')). Pipe ($. connect. reload () ;});/** create a directory srcfor html task *, and create index.html * under srcto create a view template directory view, where the view template */gulp. task ('html ', function () {gulp. src (app. srcPath + '**/*. html '). pipe (gulp. dest (app. devPath )). pipe (gulp. dest (app. prdPath )). pipe ($. connect. reload () ;});/** json task */gulp. task ('json', function () {gulp. src (app. srcPath + 'data /**/*. json '). pipe (gulp. dest (app. devPath + 'data ')). pipe (gulp. dest (app. p RdPath + 'data'). pipe ($. connect. reload () ;});/** css task * Create a style folder under src to store less files. */Gulp. task ('less ', function () {gulp. src (app. srcPath + 'style/index. less '). pipe ($. less ()). pipe (gulp. dest (app. devPath + 'css ') .pipe().css min ()). pipe (gulp. dest (app. prdPath + 'css ')). pipe ($. connect. reload ();});/** js task * Create a script folder under the src directory, which stores all js files */gulp. task ('js', function () {gulp. src (app. srcPath + 'script /**/*. js '). pipe ($. concat ('index. js ')). pipe (gulp. dest (app. devPath + 'js ')). pipe ($. Uglify ()). pipe (gulp. dest (app. prdPath + 'js ')). pipe ($. connect. reload () ;});/** image task **/gulp. task ('image', function () {gulp. src (app. srcPath + 'image /**/*'). pipe (gulp. dest (app. devPath + 'image ')). pipe ($. imagemin () // compress the image. pipe (gulp. dest (app. prdPath + 'image ')). pipe ($. connect. reload () ;}); // during each release, you may need to clear the content in the previous directory to avoid the impact of the old file on the new content. You need to delete the dist and build directory gulp before each release. task ('clean', function () {gulp. src ([app. devPath, app. prdPath]). pipe ($. clean () ;}); // total task gulp. task ('build ', ['image', 'js', 'less', 'lib ', 'html', 'json']); // service gulp. task ('serv', ['build'], function () {$. connect. server ({// start a server root: [app. devPath], // the path from which the server reads data. By default, livereload: true is read from the development path, // automatically refresh port: 1234}); // open the browser open ('HTTP: // localhost: 1234 '); // listen to gulp. watch ('bower _ components/**/* ', ['lib']); gulp. watch (app. srcPath + '**/*. html ', ['html']); gulp. watch (app. srcPath + 'data /**/*. json', ['json']); gulp. watch (app. srcPath + 'style /**/*. less ', ['less']); gulp. watch (app. srcPath + 'script /**/*. js', ['js']); gulp. watch (app. srcPath + 'image/**/* ', ['image']) ;}); // define the default task gulp. task ('default', ['serv']);
Summary
The above section describes how to use angular1 in combination with gulp and bower. I hope it will help you. If you have any questions, please leave a message and I will reply to you in time. Thank you very much for your support for the help House website!