angular1 で gulp と bower で使用するにはどうすればよいですか?

この記事では、gulp と bower で angular1 を使用するためのチュートリアルを主に紹介します。この記事は非常に詳細に紹介しているので、必要な方は参考にしてください。

gulp と bower をインストールします。 npm install -g gulpbower インストール: npm install -g bower==注意:== angularjs のいくつかのパッケージ ファイルは bower を通じて管理しています

2 番目の bower の使用

bower を使用して 1 つのプロジェクトを初期化します。 bower init

1. プロジェクト名、説明などを入力します

2. angularjsをインストールします: bower install --save angular

3. .bowerrcファイルを作成します(ウィンドウはコマンドラインで作成するのが最適であることに注意してください) 3つの自動化ツールの使用gulp

Initializationファイル：npm init（Enterを押すだけ）プロジェクトにgulp：npm i - save-devgulp

gulp の依存関係プラグインをインストールします (プロジェクトで使用されているもののみが紹介されます) gulp-clean、gulp-concat、gulp-connect、gulp-cssmin、gulp-imagemin、gulp-less、gulp-load-plugins、gulp- uglif、open (上記の gulp のインストールと同じ方法でインストールできます)

gulp の設定を記述するための gulpfile.js を作成します

1. // 依赖
   var gulp = require('gulp');
   // 进行实例化(gulp-load-plugins这个模块后面可以通过$来操作)
   var $ = require('gulp-load-plugins')();
   // open模块
   var open = require('open');
   var app = {
    srcPath: 'src/', //源代码路径
    devPath: 'build/', //整合后的路径，开发路径
    prdPath: 'dist/' //生产环境路径
   };
   // 创建任务
   gulp.task('lib', function () {
    gulp.src('bower_components/**/*.js')
    .pipe(gulp.dest(app.devPath + 'vendor'))
    .pipe(gulp.dest(app.prdPath + 'vendor'))
    .pipe($.connect.reload());
   });
   /*
   * html任务
   * 创建目录src，在src下创建index.html
   * 创建视图模版目录view，在其中存放视图view的模版
   */
   gulp.task('html', function () {
    gulp.src(app.srcPath + '**/*.html')
    .pipe(gulp.dest(app.devPath))
    .pipe(gulp.dest(app.prdPath))
    .pipe($.connect.reload());
   });
   /*
   * json任务
   */
   gulp.task('json', function () {
    gulp.src(app.srcPath + 'data/**/*.json')
    .pipe(gulp.dest(app.devPath + 'data'))
    .pipe(gulp.dest(app.prdPath + 'data'))
    .pipe($.connect.reload());
   });
   /*
   * css任务
   * 在src下创建style文件夹，里面存放less文件。 
   */
   gulp.task('less',function () {
    gulp.src(app.srcPath + 'style/index.less')
    .pipe($.less())
    .pipe(gulp.dest(app.devPath + 'css'))
    .pipe($.cssmin())
    .pipe(gulp.dest(app.prdPath + 'css'))
    .pipe($.connect.reload());
   });
   /*
   * js任务
   * 在src目录下创建script文件夹，里面存放所有的js文件
   */
   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任务
   * 
   */
   gulp.task('image', function () {
    gulp.src(app.srcPath + 'image/**/*')
    .pipe(gulp.dest(app.devPath + 'image'))
    .pipe($.imagemin()) // 压缩图片
    .pipe(gulp.dest(app.prdPath + 'image'))
    .pipe($.connect.reload());
   });
   // 每次发布的时候，可能需要把之前目录内的内容清除，避免旧的文件对新的容有所影响。 需要在每次发布前删除dist和build目录
   gulp.task('clean', function () {
    gulp.src([app.devPath, app.prdPath])
    .pipe($.clean());
   });
   // 总任务
   gulp.task('build', ['image', 'js', 'less', 'lib', 'html', 'json']);
   // 服务
   gulp.task('serve', ['build'], function () {
    $.connect.server({ //启动一个服务器
    root: [app.devPath], // 服务器从哪个路径开始读取，默认从开发路径读取
    livereload: true, // 自动刷新
    port: 1234
    });
    // 打开浏览器
    open('http://localhost:1234');
    // 监听
    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']);
   });
   // 定义default任务
   gulp.task('default', ['serve']);

上記は、皆さんの参考になれば幸いです。これからのみんな。

2. 関連記事:

3. jQuery でのコード最適化に関する詳細な手順

4. Node.js での非対称暗号化のコード例

ログインせずに Web サイトがコンテンツをコピーできない問題を解決する方法

Vueのdatepickerのサンプルコード

Vueのdatepickerプラグインはdatepicker入力ボックスの値を監視できません

Reactのコンポーネント間の抽象化の詳細な説明

React NativeのNavigatorIOSコンポーネント（詳細）チュートリアルの手順)

以上がangular1 で gulp と bower で使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。