Gulp构建Angularjs应用

头像
黑阔大人
    阅读 6 分钟
    2

    使用Gulp构建Angularjs应用的缘由

    2016在前端已经大热的今年也决定跟上时代的步伐进入前端自动化的行列，刚好公司框架采用的是angularjs，css采用的是scss预编译语言，所谓做事三思而后行：可不可以不做？ 可不可以明天做？可不可以给别人做？因此在众多自动化工具中选择了gulp，其中还有看重他的轻量级和众多的插件的原因。

    初始化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。

    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文件。但之后考虑到因为是三级分销加商城的系统项目模块比较多还是选择按功能来划分如下图：
    clipboard.png

    gulpfile任务配置

    先添加gulp的相关依赖：

    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的包和ui-router的路由（ui-router对于路由的处理相对于ng-router还是强大太多，不过也看个人习惯是使用ui-router还是ng-router），项目中因为npm现在的包管理也还不错所以我也就没使用bower，这个也是看个人习惯吧。这里手动加入项目依赖的两个包，然后创建任务做代码的合并和压缩处理。

    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的处理：

    //检查脚本
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服务

    //使用connect启动一个Web服务器
gulp.task('browserSync', function () {
  browserSync.init({
         server: {
             baseDir: "./app/"
         }
     });
});

    配置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，构建成功！并且修改代码浏览器内容自动刷新，更加方便了移动端的调试。
    clipboard.png

    下面贴一个完整的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();
   });

})
    angularjsgulpnpmbrowsersync自动化构建工具
    黑阔大人
    278 声望33 粉丝

    在这群星闪耀之年 我的征途是星辰大海

    « 上一篇
    Ionic制作Hybrid App系列二：Mac环境下Ionic release版本APK的签名与发布
    下一篇 »
    angularjs底部自动加载

    引用和评论

    推荐阅读
    头像
    关于javascript sort()排序的一点理解

    黑阔大人赞 2阅读 2.7k评论 1

    头像
    JS工程化集锦

    specialCoder赞 2阅读 1.8k

    头像
    rust 命令行工具rsup管理前端npm依赖

    hboot赞 1阅读 1.1k

    头像
    运行npm update等命令出错后如何分析问题根源

    注销阅读 2.6k

    头像
    npm publish 发布一个 Angular 库的时候报错以及解决方法

    注销阅读 1.9k

    头像
    当我用UI5诊断工具时我用些什么

    注销阅读 1.3k

    头像
    学会Github Actions自动发布版本💯

    hboot阅读 777

    0 条评论
    得票最新