Gulp構建Angularjs應用

時間 2019-11-09

標籤 gulp 構建 angularjs 應用欄目 JavaScript 简体版

原文原文鏈接

使用Gulp構建Angularjs應用的原因

2016在前端已經大熱的今年也決定跟上時代的步伐進入前端自動化的行列，恰好公司框架採用的是angularjs，css採用的是scss預編譯語言，所謂作事三思然後行：可不能夠不作？可不能夠明天作？可不能夠給別人作？所以在衆多自動化工具中選擇了gulp，其中還有看重他的輕量級和衆多的插件的緣由。css

初始化Gulp

首先須要安裝node，而後生成package.json：npm init。
安裝gulp：npm install gulp --save-dev 將gulp的包依賴加入到package.json中。
而後再是gulp的插件：
gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename。html

gulpfile.js:

var gulp = require('gulp');
//引入gulp組件
//js語法檢查
var jshint = require('gulp-jshint');
//sass預處理
var sass = require('gulp-sass');
//文件合併
var concat = require('gulp-concat');
//js壓縮
var uglify = require('gulp-uglify');
//重命名
var rename = require('gulp-rename');

目錄結構劃分

而後是咱們的目錄結構劃分，以前是想按照項目模塊來劃分，就比如登錄的模塊就是login的文件夾下面是他的html文件和css文件。但以後考慮到由於是三級分銷加商城的系統項目模塊比較多仍是選擇按功能來劃分以下圖：
前端

gulpfile任務配置

先添加gulp的相關依賴：node

var gulp = require('gulp');
//引入gulp組件
//js語法檢查
var jshint = require('gulp-jshint');
//sass預處理
var sass = require('gulp-sass');
//文件合併
var concat = require('gulp-concat');
//js壓縮
var uglify = require('gulp-uglify');
//重命名
var rename = require('gulp-rename');
//server服務
browserSync = require('browser-sync').create();

值得注意的是 browserSync 號稱前端頁面調試神器：
Browsersync能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less等）並自動刷新頁面。更重要的是 Browsersync能夠同時在PC、平板、手機等設備下進項調試。angularjs

由於是angularjs項目固然須要angularjs的包和ui-router的路由（ui-router對於路由的處理相對於ng-router仍是強大太多，不過也看我的習慣是使用ui-router仍是ng-router），項目中由於npm如今的包管理也還不錯因此我也就沒使用bower，這個也是看我的習慣吧。這裏手動加入項目依賴的兩個包，而後建立任務作代碼的合併和壓縮處理。chrome

var jsFiles = [
  './node_modules/angular/angular.js',
  './node_modules/angular-ui-router/release/angular-ui-router.js'
];

//合併、壓縮來自npm的js資源文件
gulp.task('npmscripts', function() {
  return gulp.src(jsFiles)
  .pipe(concat('npm.js'))
  .pipe(gulp.dest('./dist/js'))
  .pipe(rename('npm.min.js'))
  .pipe(uglify())
  .pipe(gulp.dest('./dist/js'));
})

下面則是對於生產環境編寫的js和css的處理：npm

//檢查腳本
gulp.task('lint', function() {
  gulp.src('./app/**/*.js')
          .pipe(jshint())
          .pipe(jshint.reporter('default'));

})

//編譯Sass
gulp.task('sass', function() {
  console.log('sass!');
  gulp.src('./app/style/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./app/style'));
  gulp.src('./app/style/*.css')
    .pipe(concat('style.css'))
    .pipe(gulp.dest('./dist/css'))
})

//合併、壓縮js文件
gulp.task('scripts', function() {
  gulp.src('./app/**/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/js'))
    .pipe(rename('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'));
});

啓動browserSync服務json

//使用connect啓動一個Web服務器
gulp.task('browserSync', function () {
  browserSync.init({
         server: {
             baseDir: "./app/"
         }
     });
});

配置gulp默認任務gulp

//默認任務
gulp.task('default', function() {
  gulp.run('npmscripts');

//初始化browserSync
browserSync.init({
       server: {
           baseDir: "./"
       }
   });
   
//監聽js變化,如過發生變化則執行lint和scripts兩個task
gulp.watch('./app/**/*.js', ['lint', 'scripts']);

//監聽js變化,如過發生變化則執行sass task
gulp.watch('./app/style/**/*.scss', ['sass']);

//監聽當app文件夾下任何文件發生變化，則自動刷新瀏覽器
gulp.watch('./app/**', function() {
       console.log('reload');
       browserSync.reload();
   });
})

配置Angularjs

配置路由瀏覽器

app.routes.js

(function() {
  'use strict';
  angular
    .module('app', ['ui-router'])
    .config(config);

  function config ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/index');
    $stateProvider
      .state('/index', {
        url: "/index",
        templateUrl: "views/index.html"
      })
  }
})()

配置首頁

index.html
<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title></title>
    <link rel="stylesheet" href="../dist/css/style.css" charset="utf-8">
    <script src="../dist/js/npm.js"></script>
    <script src="../dist/js/all.js"></script>
  </head>
  <body>
    <div ui-view class="Index">

    </div>
  </body>
</html>

在引用css和js的時候就能夠直接引用在dest目錄下合併了的文件了。
運行gulp，構建成功！而且修改代碼瀏覽器內容自動刷新，更加方便了移動端的調試。

下面貼一個完整的gulpfile.js

var gulp = require('gulp');
//引入gulp組件
//js語法檢查
var jshint = require('gulp-jshint');
//sass預處理
var sass = require('gulp-sass');
//文件合併
var concat = require('gulp-concat');
//js壓縮
var uglify = require('gulp-uglify');
//重命名
var rename = require('gulp-rename');
//server服務
browserSync = require('browser-sync').create();

var jsFiles = [
  './node_modules/angular/angular.js',
  './node_modules/angular-ui-router/release/angular-ui-router.js'
];

//檢查腳本
gulp.task('lint', function() {
  gulp.src('./app/**/*.js')
          .pipe(jshint())
          .pipe(jshint.reporter('default'));

})

//編譯Sass
gulp.task('sass', function() {
  console.log('sass!');
  gulp.src('./app/style/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./app/style'));
  gulp.src('./app/style/*.css')
    .pipe(concat('style.css'))
    .pipe(gulp.dest('./dist/css'))
})

//合併、壓縮js文件
gulp.task('scripts', function() {
  gulp.src('./app/**/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/js'))
    .pipe(rename('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'));
});
//合併、壓縮來自npm的js資源文件
gulp.task('npmscripts', function() {
  return gulp.src(jsFiles)
  .pipe(concat('npm.js'))
  .pipe(gulp.dest('./dist/js'))
  .pipe(rename('npm.min.js'))
  .pipe(uglify())
  .pipe(gulp.dest('./dist/js'));
})

//合併、壓縮css文件
// gulp.task('css', function() {
//   gulp.src('./app/style/*.css')
//     .pipe(concat('style.css'))
//     .pipe(gulp.dest('./dist/css'))
//     // .pipe(rename('style.min.css'))
//     // .pipe(uglify())
//     // .pipe(gulp.dest('./dist/css'));
// });

//使用connect啓動一個Web服務器
gulp.task('browserSync', function () {
  browserSync.init({
         server: {
             baseDir: "./app/"
         }
     });
});

//默認任務
gulp.task('default', function() {
  gulp.run('npmscripts');

//監聽js變化
browserSync.init({
       server: {
           baseDir: "./"
       }
   });

gulp.watch('./app/**/*.js', ['lint', 'scripts']);

gulp.watch('./app/style/**/*.scss', ['sass']);

// gulp.watch('./app/style/**/*.css', ['css'])

gulp.watch('./app/**', function() {
       console.log('reload');
       browserSync.reload();
   });

})