angular1配合gulp和bower的使用教程
一 安裝gulp和bower
gulp安裝: npm install -g gulp
bower安裝: npm install -g bower
==注:== angularjs的一些包文件我們是通過(guò)bower來(lái)管理的
二 bower使用
- 使用bower初始化一個(gè)項(xiàng)目: bower init
- 填寫工程名,描述等等那些東西
- 安裝angularjs:bower install --save angular
- 創(chuàng)建.bowerrc文件(注意window最好用命令行創(chuàng)建)
三 自動(dòng)化工具gulp的使用
- 初始化文件:npm init(一直回車下去就可以)
- 在項(xiàng)目里面安裝gulp:npm i --save-dev gulp
- 安裝gulp的依賴插件(只介紹項(xiàng)目中用到的)gulp-clean,gulp-concat,gulp-connect,gulp-cssmin,gulp-imagemin,gulp-less,gulp-load-plugins,gulp-uglif,open(可以和上面安裝gulp一樣安裝)
- 創(chuàng)建gulpfile.js來(lái)編寫gulp的配置
// 依賴
var gulp = require('gulp');
// 進(jìn)行實(shí)例化(gulp-load-plugins這個(gè)模塊后面可以通過(guò)$來(lái)操作)
var $ = require('gulp-load-plugins')();
// open模塊
var open = require('open');
var app = {
srcPath: 'src/', //源代碼路徑
devPath: 'build/', //整合后的路徑,開發(fā)路徑
prdPath: 'dist/' //生產(chǎn)環(huán)境路徑
};
// 創(chuàng)建任務(wù)
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任務(wù)
* 創(chuàng)建目錄src,在src下創(chuàng)建index.html
* 創(chuàng)建視圖模版目錄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任務(wù)
*/
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任務(wù)
* 在src下創(chuàng)建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任務(wù)
* 在src目錄下創(chuàng)建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任務(wù)
*
*/
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());
});
// 每次發(fā)布的時(shí)候,可能需要把之前目錄內(nèi)的內(nèi)容清除,避免舊的文件對(duì)新的容有所影響。 需要在每次發(fā)布前刪除dist和build目錄
gulp.task('clean', function () {
gulp.src([app.devPath, app.prdPath])
.pipe($.clean());
});
// 總?cè)蝿?wù)
gulp.task('build', ['image', 'js', 'less', 'lib', 'html', 'json']);
// 服務(wù)
gulp.task('serve', ['build'], function () {
$.connect.server({ //啟動(dòng)一個(gè)服務(wù)器
root: [app.devPath], // 服務(wù)器從哪個(gè)路徑開始讀取,默認(rèn)從開發(fā)路徑讀取
livereload: true, // 自動(dòng)刷新
port: 1234
});
// 打開瀏覽器
open('http://localhost:1234');
// 監(jiān)聽
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任務(wù)
gulp.task('default', ['serve']);
總結(jié)
以上所述是小編給大家介紹的angular1配合gulp和bower的使用教程,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
詳解Angular Karma測(cè)試的持續(xù)集成實(shí)踐
這篇文章主要介紹了詳解Angular Karma測(cè)試的持續(xù)集成實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Angular2搜索和重置按鈕過(guò)場(chǎng)動(dòng)畫
這篇文章主要介紹了Angular2搜索和重置按鈕過(guò)場(chǎng)動(dòng)畫,需要的朋友可以參考下2017-05-05
AngularJS實(shí)現(xiàn)多級(jí)下拉框
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)多級(jí)下拉框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
angular6的table組件開發(fā)的實(shí)現(xiàn)示例
這篇文章主要介紹了angular6的table組件開發(fā)的實(shí)現(xiàn)示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
Angular2學(xué)習(xí)筆記——詳解NgModule模塊
這篇文章主要介紹了Angular2學(xué)習(xí)筆記——詳解NgModule模塊,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
基于angular6.0實(shí)現(xiàn)的一個(gè)組件懶加載功能示例
這篇文章主要介紹了基于angular6.0實(shí)現(xiàn)的一個(gè)組件懶加載功能示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
Angular?結(jié)合?dygraphs?實(shí)現(xiàn)?annotation功能
這篇文章主要介紹了Angular?結(jié)合?dygraphs?實(shí)現(xiàn)?annotation,本文,我們直接結(jié)合 Angular 來(lái)演示,如何通過(guò) dygraphs 實(shí)現(xiàn)折線圖上的 annotation 的功能,需要的朋友可以參考下2022-08-08

