Heim > Artikel > Web-Frontend > 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
Verwenden Sie Bower, um ein Projekt zu initialisieren: Bower Init
Geben Sie den Projektnamen, die Beschreibung usw. ein.
Installieren Sie AngularJS: Bower Install --Save Angular
Erstellen Sie eine .bowerrc-Datei (beachten Sie, dass Windows am besten über die Befehlszeile erstellt wird)
Verwendung der drei automatisierten Tools gulp
Initialisierungsdatei: npm init (einfach die Eingabetaste drücken)
Gulp im Projekt installieren: npm i --save-dev gulp
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)
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!