Comment l'utiliser avec gulp et bower dans angulaire1 ?

Cet article présente principalement le tutoriel d'utilisation d'angular1 avec gulp et bower. Cet article vous présente de manière très détaillée et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

Installation de gulp. et bower

installation de gulp : npm install -g gulp
installation de bower : npm install -g bower
== Remarque : == Certains des fichiers de package d'angularjs que nous sont gérés par bower

Utiliser bower

1. Utiliser bower pour initialiser un projet : bower init

2. Remplissez le nom du projet, la description, etc.

3. Installer angulairejs : bower install --save angulaire

4. Créez un fichier .bowerrc (notez qu'il est préférable de créer les fenêtres en utilisant la ligne de commande)

Utilisation des trois outils automatisés gulp

1. Fichier d'initialisation : npm init (appuyez simplement sur Entrée)

2. Installez gulp dans le projet : npm i --save-dev gulp

3. Installer les plug-ins de dépendances de gulp (seuls ceux utilisés dans le projet sont présentés) gulp-clean, gulp-concat, gulp-connect, gulp-cssmin, gulp-imagemin, gulp-less, gulp -load-plugins , gulp-uglif, open (peut être installé de la même manière que l'installation de gulp ci-dessus)

4. Créez gulpfile.js pour écrire la configuration de gulp

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Instructions détaillées sur l'optimisation du code dans jQuery

Code sur le chiffrement asymétrique dans l'exemple Node.js

Comment résoudre le problème selon lequel le site Web ne peut pas copier le contenu sans se connecter

Exemple de code pour le sélecteur de date dans Vue

Le plug-in datepicker dans Vue ne peut pas surveiller la valeur de la zone de saisie datepicker

Description détaillée de l'abstraction entre les composants dans React

Composant NavigatorIOS dans React Native (description détaillée du tutoriel)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!