运用gulp+bower构建Angular.js项目

本文重点是细致引见Angular.js项目的构建。gulp是优异的自动化项目构建东西,我们将用它完成 javascript/less/css/html/images/fonts 等文件的的测试、搜检、兼并、紧缩、花样化、浏览器自动革新、布置文件天生,并监听文件在修正后反复指定的这些步骤(热重载)。bower是项目依靠治理东西。

环境需求

gulp运转在nodejs环境,起首装置nodejs。平常npm会随nodejs一同装置,npm(node package manager)是nodejs的包治理器,用于node插件治理(包含装置、卸载、治理依靠等)。能够用node -v检察装置的nodejs版本以及npm -v`检察npm的版本号。
装置bower:$ npm install -g bower

在windows环境中,git bsah 装置bower会涌现毛病,能够在切换到cmd中装置

初始化项目

$ cd d:/develop  #定位到develop目次
$ mkdir angular-gulp-bower-seed #新建项目目次
$ cd angular-gulp-bower-seed #进入项目目次
$ npm init #初始化项目,并在项目项目中自动天生package.json文件
$ bower init #新建bower.json

此时项目初始化终了,能够最先装置项目依靠

#其他项目依靠也用此敕令装置,这些依靠将自动装置到bower_component文件夹下,在代码中引入制订的位置即可
$ bower install angular jquery bootstrap --save-dev

装置时运用–save将自动保存设置信息至bower.json的dependencies数组中,运用–save-dev将自动保存设置信息至bower.json的devDependencies数组中。
保存至bower.json后,其他开辟者对应下载即可(敕令提示符实行bower install,则会依据bower.json下载一切依靠包,bower install –production只下载dependencies节点的包)。

装置gulp东西包

$ npm install -g gulp #全局装置gulp后能够在敕令行中运用gulp敕令,实行gulp使命
$ npm install --save-dev gulp  $当地装置gulp插件,以便在设置文件中挪用gulp插件的功用
$ npm install autoprefixer-core babel-preset-es2015 browser-sync gulp-autoprefixer gulp-babel gulp-changed gulp-clean gulp-clean-css gulp-concat gulp-csso gulp-htmlmin gulp-jshint gulp-load-plugins gulp-ng-annotate gulp-ng-html2js gulp-rename gulp-rev gulp-rev-collector gulp-sequence gulp-size gulp-uglify gulp-useref http-server jasmine-core jshint jshint-stylish url --save-dev  #装置插件

构建项目目次

项目目次组织以下:

angular-gulp-bower-seed 
│  .bowerrc  //bower装置包目次设置
│  .gitignore
│  bower.json
│  gulpfile.js  //gulp设置文件,打包处置惩罚,开启效劳等等
│  LICENSE
│  mockAPI.js  //组织.json数据文件后,经由过程读取文件体式格局模仿API要求,在前后端开辟进度不一致时异常有效
│  package.json
│  README.md
│
├─app  //项目开辟目次
│   │  angular.png.ico  //ico图标
│   │  app.js  //angular项目大众设置,包含主模块建立,路由设置,http阻拦处置惩罚等
│   │  index-dist.html  // 供gulp编译,引入打包后的文件(script/styles/fonts)
│   │  index.html  SPA项目进口
│   │
│   ├─bower_components //bower治理的依靠库
│   │  ├─angular
│   │  ├─angular-bootstrap
│   │  ├─angular-cookies
│   │  ├─angular-local-storage
│   │  ├─angular-md5
│   │  ├─angular-resource
│   │  ├─angular-route
│   │  ├─angular-ui
│   │  ├─angular-ui-router
│   │  ├─bootstrap
│   │  └─jquery
│   ├─data //构建json花样的静态数据(mock datas)
│   │      csrfToken.json
│   │      login.json
│   │
│   ├─public //项目大众资源,包含字体,图片
│   │  ├─css
│   │  ├─fonts
│   │  └─images
│   │
│   └─src //项目源代码
│       ├─controllers  //控制器相干代码,语义化定名
│       │      appControllers.js
│       │
│       ├─directives  //自定义指令相干代码
│       │  │  directives.js  //指令剧本
│       │  │
│       │  └─tpls   //指令模板文件夹
│       │          datepicker.html
│       │          modal.html
│       │          pagination.html
│       │
│       ├─filters //过滤器代码
│       │      filters.js
│       │
│       ├─services //效劳代码
│       │      apiServices.js //与API要求相干效劳
│       │      app.util.js  //大众效劳
│       │      services.js  //其他
│       │
│       ├─styles  //项目款式文件夹
│       │      app.css
│       │      directives.css
│       │      page1.css
│       │      page2.css
│       │
│       └─templates  //项目视图文件夹
│           │  app.html
│           │  login.html
│           │  noRight.html
│           │
│           ├─modalViews  //模态框视图文件夹
│           │
│           ├─page1Views  //按营业分别视图1文件夹
│           │
│           └─page2Views  //按营业分别视图2文件夹
│
│
├─appDist  //项目编译打包后天生目次

设置gulpfile.js


var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var $ = plugins = gulpLoadPlugins();
var autoprefixer = require('gulp-autoprefixer');
var ngHtml2Js = require("gulp-ng-html2js");
var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');//Minify JavaScript with UglifyJS2.
var cleanCSS = require('gulp-clean-css');
var htmlmin = require('gulp-htmlmin');
var jshint = require('gulp-jshint');    //jshint检测javascript的语法毛病
var useref = require('gulp-useref');
var csso = require('gulp-csso');
var concat = require('gulp-concat');
var rename = require("gulp-rename");
const babel = require('gulp-babel');

var browserSync = require('browser-sync');
var reload = browserSync.reload;

var url = require('url');
var mockApi = require('./mockApi');

var distFolderUrl = "appDist";
gulp.task('clean', function () {
  return require('del')([distFolderUrl + '/**','tmp/**','dist/**']);
});


gulp.task('templatesTpls', function () {
  return gulp.src([
      './app/src/directives/tpls/*.html',
    ])
    .pipe(ngHtml2Js({
        moduleName: "myApp",
        prefix: "src/directives/tpls/"
    }))
    .pipe(concat("templatesTpls.min.js"))
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./tmp/templates'))
});

gulp.task('templatesViews', function () {
  return gulp.src([
      './app/src/templates/**/*.html'
    ])
    .pipe(ngHtml2Js({
        moduleName: "myApp",
        rename:function (templateUrl, templateFile) {
          var pathParts = templateFile.path.split('\\');
          var file = pathParts[pathParts.length - 1];
          var folder = pathParts[pathParts.length - 2];
          if ("templates" === folder) {
            return "./src/templates/" + file
          } else {
            return "./src/templates/" + folder + '/' + file
          }
        }
    }))
    .pipe(concat("templatesViews.min.js"))
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./tmp/templates'))
});

gulp.task('copyTemplatesToDist', function () {
  return gulp.src([
      './app/src/templates/**/*.html',
    ])
  .pipe(gulp.dest(distFolderUrl + '/src/templates'));
});

gulp.task('copyTplsToDist', function () {
  return gulp.src([
      './app/src/directives/tpls/**/*.html',
    ])
  .pipe(gulp.dest(distFolderUrl + '/src/directives/tpls'));
});

// gulp.task('font', function() {
//   return gulp.src(['./app/public/fonts/**/*'], {base: './app/'})
//   .pipe(gulp.dest(distFolderUrl + ''))
// });

// gulp.task('images', function() {
//   return gulp.src(['./app/public/images/**/*'], {base: './app/'})
//   .pipe(gulp.dest(distFolderUrl + ''))
// });

gulp.task('public', function() {
  return gulp.src(['./app/public/**/*','./app/*.ico'], {base: './app/'})
  .pipe(gulp.dest(distFolderUrl))
});


gulp.task('vendorCss',function () {
  return gulp.src(['./app/bower_components/**/*.css'])
    .pipe(gulp.dest(distFolderUrl + '/vendor'))
})
gulp.task('vendorFont',function () {
  return gulp.src([ './app/bower_components/bootstrap/dist/fonts/**'])
    .pipe(gulp.dest(distFolderUrl + '/vendor/bootstrap/dist/fonts'))
})
gulp.task('vendorJs',function () {
  return gulp.src('./app/bower_components/**/*.js')
    .pipe(gulp.dest(distFolderUrl + '/vendor'))
})
// gulp.task('vendor', ['vendorCss', 'vendorJs', 'vendorFont']);

gulp.task('vendor', function () {
  return gulp.src(['./app/bower_components/**/*'])
    .pipe(gulp.dest(distFolderUrl + '/vendor'))
});


var cssList = [
  './app/src/styles/app.css',
  './app/src/styles/*.css'
];

gulp.task('css', function() {
  return gulp.src(cssList)
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(concat('app.min.css'))
    .pipe(cleanCSS())
    .pipe(gulp.dest(distFolderUrl + '/static/css'))
})


var jsList = [
  './app/*.js',
  './app/src/directives/*.js',
  './app/src/controllers/*.js',
  './app/src/services/*.js',
  './app/src/filters/*.js',
  './tmp/templates/*.js',
];

gulp.task('jshint', function () {
  return gulp.src(jsList)
    .pipe(reload({stream: true, once: true}))
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'))
});

// gulp.task('js', ['jshint'], function () {
gulp.task('js', ['templatesTpls','templatesViews'], function () {
  return gulp.src(jsList)
  .pipe(concat('app.min.js'))
  .pipe(babel({
      presets: ['es2015']
  }))
    .pipe(uglify({
            mangle: false,//范例:Boolean 默许:true 是不是修正变量名
            compress: false,//范例:Boolean 默许:true 是不是完整紧缩
            preserveComments: 'all' //保存解释
        }).on('error', function(e){
            console.log(e);
         }))
    .pipe(gulp.dest(distFolderUrl + '/static/js'))
});


gulp.task('htmlVendor', function () {
  return gulp.src(['app/index-vendor.html'])
    .pipe(useref({ searchPath: ['app'] }))
    // .pipe(rename('index1.html'))
    .pipe(gulpif('*.js', uglify({
            mangle: false,
            compress: false,
            preserveComments: 'all'
        })))
    .pipe(gulpif('*.css', csso()))
    // .pipe(gulpif('*.html', htmlMinify({conditionals: true, loose: false})))
    .pipe(gulp.dest(distFolderUrl));
});

// gulp.task('html', ['copyTemplatesToDist', 'copyTplsToDist'], function () {
gulp.task('html', function () {
  return gulp.src(['app/index-dist.html'])
    .pipe(rename('index.html'))
    .pipe(gulp.dest(distFolderUrl))
})



gulp.task('build', ['public','vendor','js','css','html'], function () {
  return gulp.src(distFolderUrl + '/**/*').pipe($.size({title: 'build', gzip: true}));
});

gulp.task('default', ['clean'], function () {
  gulp.start('build');
});

  // var files = [
  //     'app/**/*.html',
  //     'app/**/*.css',
  //     'app/**/*.js',
  //     'app/public/**/*',
  //     'app/data/**/*'
  //   ];
  gulp.task('serve',  function () {
    browserSync({
      notify: false, // Don't show any notifications in the browser.
      port: 8081,
      open: false,
      server: {
        baseDir: ['app'],
        routes: {
          // 'bower_components': 'bower_components',//if bower_components' path is up the tree of app
        },
        middleware:
            function (req, res, next) {
                var urlObj = url.parse(req.url, true),
                    method = req.method,
                    paramObj = urlObj.query;
                mockApi(res, urlObj.pathname, paramObj, next);
            }
      }
    });

    // watch for changes
    gulp.watch([
      'app/**/*.html',
      'app/**/*.css',
      'app/**/*.js',
      'app/public/**/*',
      'app/data/**/*'
    ]).on('change', reload);

    gulp.watch('app/src/**/*.less', ['styles', reload]);
    gulp.watch('bower.json', ['fonts', reload]);
  });

  gulp.task('serve-release',  function () {
    browserSync({
      notify: false,
      port: 8081,
      server: {
        baseDir: [distFolderUrl]
      }
    });

  });





运转gulp使命

gulp <taskName>

$ gulp clean #清空编译目次
$ gulp build #编译打包
$ gulp serve #开启开辟环境效劳器 http://localhost:8080
$ gulp serve-release #开启临盆环境效劳器 http://localhost:8081

项目源码:angular-gulp-bower-seed

    原文作者:anetin
    原文地址: https://segmentfault.com/a/1190000010213525
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞