最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間:8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包詳解

gulp介紹

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)張北,十年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

基于流的前端自動化構(gòu)建工具,利用gulp可以提高前端開發(fā)效率,特別是在前后端分離的項目中。使用gulp能完成以下任務(wù):

  • 壓縮html、css和js
  • 編譯less或sass等
  • 壓縮圖片
  • 啟動本地靜態(tài)服務(wù)器
  • 其他

目標

  • 一鍵安裝項目所有的依賴模塊
  • 一鍵安裝項目所有的依賴庫
  • 代碼檢查確保嚴格語法正確
  • 能將angularjs的html裝換成js模塊并且壓縮到j(luò)s文件中
  • 將所有css文件合并壓縮
  • 將所有的js文件合并壓縮
  • 動態(tài)引入資源文件
  • 擁有開發(fā)環(huán)境和生產(chǎn)環(huán)境兩種打包方式

工具

  • npm基于node的包管理器
  • gulp基于node文件流的構(gòu)建系統(tǒng)
  • bower是Web開發(fā)中的一個前端文件包管理器

實現(xiàn)過程

1、一鍵安裝項目所有的依賴模塊

創(chuàng)建項目使用命令(項目目錄下)

npm init
//生成package.json
{
 "name": "leason",
 "version": "1.0.0",
 "description": "test for angular and gulp and unit testing",
 "main": "gulpfile.js",
 "dependencies": {
 },
 "devDependencies": {
 },
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "repository": {

 },
 "keywords": [
 "leason"
 ],
 "author": "leason",
 "license": "ISC",
 "bugs": {
 },
}

npm安裝依賴模塊采用命令

npm install xxx --save  //保存到dependencies(生產(chǎn))
npm install xxx --save-dev //保存到devDependencies(開發(fā))

package.json中保存相應(yīng)模塊,項目重新部署只需要命令

npm install //安裝package中所有模塊

一鍵安裝項目所有的依賴模塊使用bower管理器,用法和npm類似

2、語法檢查

npm install gulp-jshint --save-dev
//代碼語法檢查命令--gulp jshint
var jshint = require('gulp-jshint'); //代碼檢查
gulp.task('jshint', function () {
 return gulp.src(paths.js)
 .pipe(jshint())
 .pipe(jshint.reporter('default'));
});

轉(zhuǎn)換html為js模塊

npm install gulp-angular-templatecache --save-dev
//合并html模板命令--gulp template
var templateCache = require('gulp-angular-templatecache');
gulp.task('template', function () {
 return gulp.src(['./templates/**/*.html','./templates/*.html'])
 .pipe(templateCache({module: 'templates'}))
 .pipe(gulp.dest('./js'))
});

3、將所有css文件合并壓縮

npm install gulp-cssmin --save-dev
//合并壓縮css命令--gulp deployCSS
var cssmin = require('gulp-cssmin');
gulp.task('deployCSS', function() {
 return gulp.src(paths.css)
 .pipe(cssmin())
 .pipe(concat('all.css'))
 .pipe(gulp.dest('./build'));
});

4、將所有js文件合并壓縮

npm install gulp-uglify --save-dev  //壓縮
npm install gulp-concat --save-dev  //合并
npm install gulp-sourcemapsy --save-dev //處理 JavaScript 時生成 SourceMap
npm install gulp-strip-debug --save-dev //去除打印
//測試生產(chǎn)兩種js壓縮命令--生產(chǎn)gulp js --prod測試gulp js --dev
gulp.task('js', function(type) {
 console.log(type);
 if (type == 'dev') { // dev
 return gulp.src(paths.js)
  .pipe(concat('all.js'))
  .pipe(gulp.dest('./build'));
 } else { // prod
 return gulp.src(paths.js)
  .pipe(sourcemaps.init())
  .pipe(stripDebug())
  .pipe(uglify())
  .pipe(concat('all.min.js'))
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('./build'));
 }
});

5、根據(jù)現(xiàn)有文件想index中引入

npm install gulp-inject --save-dev

index.html中標識寫入的位置如:




 
 
 
 
 
 
 
 
 
 
 
 
 


 

開發(fā)環(huán)境

//dev資源引用命令--gulp devIndex
gulp.task('devIndex', ['clean', 'jshint'], function () {
 // It's not necessary to read the files (will speed up things), we're only after their paths:
 return gulp.src('./index.html')
 .pipe(inject(gulp.src(paths.js, {read: false}), {relative: true}))
 .pipe(inject(gulp.src(paths.css, {read: false}), {relative: true}))
 // .pipe(inject(gulp.src(bowerFiles(), {read: false}), {name: 'bower', relative: true}))
 .pipe(gulp.dest('./'));
});

生產(chǎn)環(huán)境

//生產(chǎn)環(huán)境資源引用命令--gulp deployIndex
gulp.task('deployIndex', ['clean', 'jshint', 'template', 'js', 'deployCSS'], function () {
 // It's not necessary to read the files (will speed up things), we're only after their paths:
 return gulp.src('./index.html')
 .pipe(inject(gulp.src(paths.buildjs, {read: false}), {relative: true}))
 .pipe(inject(gulp.src(paths.buildcss, {read: false}), {relative: true}))
 // .pipe(inject(gulp.src(bowerFiles(), {read: false}), {name: 'bower', relative: true}))
 .pipe(gulp.dest('./'));
});

注意點

代碼混淆過會使angular的依賴注入無法識別,所以代碼編寫的過程中要使用嚴格依賴的寫法。如

angularApp.config(['$routeProvider','$stateProvider','$urlRouterProvider',function($routeProvider,$stateProvider,$urlRouterProvider) {
 $stateProvider
 .state('sidebar', {
  url: '/sidebar',
  // abstract: true,
  templateUrl: 'templates/sidebar.html',
  controller: 'sidebarCtrl'
 })
 $urlRouterProvider.otherwise('/sidebar/tab1');
}]);

總結(jié)

以上就是這篇文章的全部內(nèi)容,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對創(chuàng)新互聯(lián)的支持。


網(wǎng)站欄目:Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包詳解
當前URL:http://fisionsoft.com.cn/article/jspoec.html