angular 配合 gulp開發項目

時間 2019-11-08

原文原文鏈接

最近在學習angular作後臺管理項目，因此把記錄一下開發流程。javascript

準備工具

gulp --用來自動化構建項目
angular --搭建項目css

開發目錄

本人這個項目的開發目錄是這樣的html

componentsjava

組件git

csschrome

樣式gulp

imgbootstrap

圖片sass

libapp

依賴的框架（angular、Jq等都放在裏面）

scripts

app.js(主要是路由配置)

index.html

首頁

HTML編寫

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>angularDemo</title>
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
        <link rel="stylesheet" type="text/css" href="css/all.min.css" />
    </head>

    <body ng-app="app">
        <header>這裏是頭部</header>
        <h1>如今是{{pageName}}</h1>
        <ul class="nav nav-pills">
            <li role="presentation" ui-sref-active="active" ui-sref="index"><a href="#">index</a></li>
            <li role="presentation" ui-sref-active="active" ui-sref="module2"><a href="#">第二頁</a></li>
            <li role="presentation" ui-sref-active="active" ui-sref="module3"><a href="#">第三頁</a></li>
        </ul>
        <section data-ui-view="">
            <!--你的頁面將加載在這-->
        </section>
    </body>
    <script src="js/lib.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/business.js" type="text/javascript" charset="utf-8"></script>

</html>

app.js的編寫

'use strict';
var app = angular.module('app', [
    'ui.router',
    'controller',
    'directive',
    'services',
    'templates'
]).config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider
    .otherwise(function(inject, location) {
        var path = location.$$path || "";
        return '/index';
    })
    $stateProvider.state('index', {
            url: "/index",
            controller: "indexCtr",
            templateUrl: 'components/index/index.html'
    }).state('module2', {
            url: "/module2",
            controller: "module2Ctr",
            templateUrl: 'components/module2/module2.html'
    }).state('module3', {
            url: "/module3",
            controller: "module3Ctr",
            templateUrl: 'components/module3/module3.html'
    })

}]).run(['$rootScope', '$state', function(rootScope, state) {
    //初始化
}]);

angular.module('controller', []);
angular.module('directive', []);
angular.module('services', []);
angular.module('templates', []);

模塊的寫法

index.html

<div>我是index.html</div>

index.js

angular.module('controller')
    .controller('indexCtr', ['$scope', '$rootScope', '$http',  function($scope, $rootScope, $http) {
        var vm = $scope.vm = {};
        $rootScope.pageName = 'index';
    }]);

packageJson

{
  "name": "angular",
  "version": "1.0.0",
  "description": "angualr with gulp",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "gulp",
    "build": "gulp build"
  },
  "repository": {
    "type": "git",
    "url": "https://git.coding.net/mumofa/angular_Gulp.git"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.12.8",
    "chokidar": "^1.5.1",
    "del": "^2.2.0",
    "event-stream": "^3.3.2",
    "gulp": "^3.9.1",
    "gulp-angular-templatecache": "^1.8.0",
    "gulp-concat": "^2.6.0",
    "gulp-minify-css":"^1.2.4",
    "gulp-sass": "^2.3.1",
    "gulp-uglify": "^1.5.3"
  }
}

gulp腳本編寫

var gulp = require('gulp');
var concat = require('gulp-concat'); //合併文件
var minifycss = require('gulp-minify-css'); //壓縮css
var templateCache = require('gulp-angular-templatecache'); //壓縮 ng模板
var uglify = require('gulp-uglify'); // 壓縮 代碼
var es = require('event-stream'); // 事件插件
var del = require("del"); //刪除
var browserSync = require("browser-sync"); // 自動刷新
var chokidar = require('chokidar'); //監聽

//壓縮依賴的js代碼 
gulp.task('libScripts', function() {
    var scriptsGlob = ['app/lib/jQuery/*.js',
        'app/lib/bootstrap/*.js',
        'app/lib/angular/angular.min.js',
        'app/lib/**/*.js'
    ];
    return gulp.src(scriptsGlob)
        .pipe(uglify()) //壓縮 js代碼
        .pipe(concat('lib.min.js')) // 拼接成 一個js
        .pipe(gulp.dest('dist/js')) //輸出到指定目錄
});
//壓縮ng代碼
gulp.task('ngScripts', function() {
    var scriptsGlob = [
        '!app/lib/**/*.js',
        'app/scripts/app.js',
        'app/**/*.js'
    ];
    var tpl = gulp.src('app/**/*.html')
        .pipe(templateCache());

    /*return gulp.src(scriptsGlob)
        .pipe(uglify()) //壓縮 js代碼
        .pipe(concat('business.min.js')) // 拼接成 一個js
        .pipe(gulp.dest('dist/js')) //輸出到指定目錄*/
    return es.merge(es.merge(
                gulp.src(scriptsGlob),
                tpl
            )
//            .pipe(uglify())
//            .pipe(concat('business.min.js'))
            .pipe(concat('business.js')))
        .pipe(gulp.dest('dist/js'));
});
//輸出HTML
gulp.task("distHtml",function(){
    return gulp.src("app/index.html")
        .pipe(gulp.dest('dist'))
});
//壓縮css
gulp.task('minifyCss', function() {
    var cssSrc = [
        'app/css/bootstrap/**/*.css',
        'app/css/Font-Awesome/**/*.css',
        'app/css/system.css',
        'app/css/**/*.css'
    ];
    return gulp.src(cssSrc) //壓縮的文件
        .pipe(minifycss()) //執行壓縮
        .pipe(concat('all.min.css')) // 拼接成 一個js
        .pipe(gulp.dest('dist/css')); //輸出到指定目錄
});
//清空 輸出
gulp.task('clean', function(cb) {
    del(['dist'], cb);
});
//gulp運行的時候
gulp.task("default", ['init']);
gulp.task('watch',['watch:css','watch:ng','watch:html']);
gulp.task("init", ['libScripts','distHtml', 'ngScripts', 'minifyCss']);

gulp.task('browser-sync', ["init","watch"], function() {
    browserSync.init({
        server: {
            baseDir: ["app"]
        },
        middleware: [function(req, res, next) {
            next();
        }],
        port: 80
    });
});

//監聽css
gulp.task("watch:css", function() {
    var cssSrc = [
        'app/css/bootstrap/**/*.css',
        'app/css/Font-Awesome/**/*.css',
        'app/css/system.css',
        'app/css/**/*.css'
    ];
    gulp.watch(cssSrc,['minifyCss'], browserSync.reload);
});
//監聽js和html模板
gulp.task("watch:ng", function() {
    var jsSrc = [
        '!app/lib/**/*.js',
        'app/scripts/app.js',
        'app/**/*.js'
    ];
    var tplSrc = 'app/**/*.html';
    gulp.watch(jsSrc,['ngScripts'], browserSync.reload);
    gulp.watch(tplSrc,['ngScripts'], browserSync.reload);
});
//監聽html
gulp.task("watch:html", function() {
    var htmlSrc = ['app/index.html'];
    gulp.watch(htmlSrc,['distHtml'], browserSync.reload);
});

process.on('uncaughtException', function(e){console.log(e.stack)})