Wie verwende ich es mit Gulp und Bower in Angular1?

In diesem Artikel wird hauptsächlich das Tutorial zur Verwendung von Angular1 mit Gulp und Bower vorgestellt. Dieser Artikel stellt Sie ausführlich vor und hat Referenzwert.

Installation Gulp und Bower

gulp-Installation: npm install -g gulp
Bower-Installation: npm install -g Bower
== Hinweis: == Einige der Paketdateien von AngularJS haben wir werden von Bower verwaltet

Verwenden Sie Bower

1. Verwenden Sie Bower, um ein Projekt zu initialisieren: Bower Init

2. Geben Sie den Projektnamen, die Beschreibung usw. ein.

3. Installieren Sie AngularJS: Bower Install --Save Angular

4. Erstellen Sie eine .bowerrc-Datei (beachten Sie, dass Windows am besten über die Befehlszeile erstellt wird)

Verwendung der drei automatisierten Tools gulp

1. Initialisierungsdatei: npm init (einfach die Eingabetaste drücken)

2. Gulp im Projekt installieren: npm i --save-dev gulp

3. Installieren Sie die Abhängigkeits-Plugins von gulp (nur die im Projekt verwendeten werden vorgestellt): gulp-clean, gulp-concat, gulp-connect, gulp-cssmin, gulp-imagemin, gulp-less, gulp -load-plugins, gulp-uglif, öffnen (kann auf die gleiche Weise wie oben bei der Installation von gulp installiert werden)

4. Erstellen Sie gulpfile.js, um die Gulp-Konfiguration zu schreiben

// 依赖
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']);

oben habe ich es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Detaillierte Anleitung zur Codeoptimierung in jQuery

Code zur asymmetrischen Verschlüsselung im Node.js-Beispiel

So lösen Sie das Problem, dass die Website ohne Anmeldung keine Inhalte kopieren kann

Beispielcode für Datepicker in Vue

Das Datepicker-Plug-in in Vue kann den Wert des Datepicker-Eingabefelds nicht überwachen

Detaillierte Beschreibung der Abstraktion zwischen Komponenten in React

NavigatorIOS-Komponente in React Native (ausführliche Tutorialbeschreibung)

Das obige ist der detaillierte Inhalt vonWie verwende ich es mit Gulp und Bower in Angular1?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!