Angular1 is used in combination with gulp and bower, angular1gulpbower

Source: Internet
Author: User

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

  1. Use bower to initialize a project: bower init
  2. Enter the project name, description, and so on.
  3. Install angularjs: bower install -- save angular
  4. Create a. bowerrc file (note that it is best to use the command line to create a window)

Use of three automation tools gulp

  1. Initialization File: npm init (always press Enter)
  2. Install gulp: npm I -- save-dev gulp in the project
  3. 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)
  4. 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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.