gulp + angular + requirejs 简单学习

一、安装gulp（已经安装了node环境）

npm install -g gulp

二、在package.json文件中配置依赖插件

{

  "name": "xxxx",

  "version": "0.0.0",

  "private": true,

  "scripts": {

    "start": "node ./bin/www"

  },

  "devDependencies": {

    "del": "^2.2.0",

    "gulp": "^3.9.1",

    "gulp-autoprefixer": "^3.1.0",

    "gulp-cache": "^0.4.5",

    "gulp-compass": "^2.1.0",

    "gulp-concat": "^2.6.0",

    "gulp-imagemin": "^3.0.1",

    "gulp-jshint": "^2.0.1",

    "gulp-livereload": "^3.8.1",

    "gulp-minify-css": "^1.2.4",

    "gulp-notify": "^2.2.0",

    "gulp-rename": "^1.2.2",

    "gulp-requirejs": "^0.1.3",

    "gulp-requirejs-optimize": "^1.0.0",

    "gulp-sass": "^2.3.2",

    "gulp-sourcemaps": "^1.6.0",

    "gulp-uglify": "^1.5.3"

  }

}

注：devDependencies里可以注册你要包含的插件以及相应的版本
三、安装这些插件
npm install （如果想单独安装某个插件 npm install --save-dev gulp-uglify@version）

四、配置gulpfile.js文件

var gulp = require('gulp'),

	  sass = require('gulp-sass'),

    compass = require('gulp-compass'),

    autoprefixer = require('gulp-autoprefixer'),

    minifycss = require('gulp-minify-css'),

    jshint = require('gulp-jshint'),

    uglify = require('gulp-uglify'),

    imagemin = require('gulp-imagemin'),

    rename = require('gulp-rename'),

    concat = require('gulp-concat'),

    notify = require('gulp-notify'),

    cache = require('gulp-cache'),

    livereload = require('gulp-livereload'),

    del = require('del'),

    sourcemaps = require('gulp-sourcemaps'),

    requirejsOptimize=require('gulp-requirejs-optimize');

gulp.task('styles', function() {

  return gulp.src('public/stylesheets/src/*.scss')

    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))

    .pipe(sourcemaps.init())

    .pipe(autoprefixer('last 2 version'))

    .pipe(sourcemaps.write())

    .pipe(gulp.dest('public/stylesheets/dist'))

    .pipe(rename({suffix: '.min'}))

    .pipe(minifycss())

    .pipe(gulp.dest('public/stylesheets/dist'))

    .pipe(notify({ message: 'Styles task complete' }));

   //.pipe(browserSync.reload({stream: true}));

});

gulp.task('scripts', function() {

  return gulp.src('public/javascripts/src/**/*.js')

    // .pipe(jshint('.jshintrc'))

    // .pipe(jshint.reporter('default'))

    .pipe(requirejsOptimize({

        mainConfigFile: 'public/javascripts/src/config.js',

        //optimize: 'none',

        optimize: 'none',

        exclude: [

            'angular',

            'angularRoute',

            'angularMocks',

            'text',

            'ngFileUpload',

            'routeStyles',

            'uediter',

            'ueditorConfig',

            'ueditorAll',

            'pagination'

        ]

    }))

    .pipe(gulp.dest('public/javascripts/dist'))

    .pipe(rename({suffix: '.min'}))

    .pipe(uglify())

    .pipe(gulp.dest('public/javascripts/dist'))

    .pipe(notify({ message: 'Scripts task complete' }));

});

gulp.task('images', function() {

  return gulp.src('public/images/src/**/*')

    .pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))

    .pipe(gulp.dest('public/images/dist'))

    .pipe(notify({ message: 'Images task complete' }));

});

gulp.task('clean', function(cb) {

    del(['public/stylesheets/dist', 'public/javascripts/dist', 'public/images/dist'], cb)

});

gulp.task('blog',function() {

    gulp.start('styles', 'scripts', 'images');

});

gulp.task('watch', function() {

  // Watch .scss files

  gulp.watch('public/stylesheets/src/**/*.scss', ['styles']);

  // Watch .js files

  gulp.watch('public/javascripts/src/**/*.js', ['scripts']);

  // Watch image files

  gulp.watch('public/images/src/**/*', ['images']);

  livereload.listen();

  // Watch any files in dist/, reload on change

  gulp.watch(['public/stylesheets/dist', 'public/javascripts/dist', 'public/images/dist']).on('change', livereload.changed);

});

注：以上为比较直观简单的配置，可以使用gulp-load-plugin插件进一步优化该文件，相关插件功能可以访问官网查看相关的信息

五、angular + requirejs 使用

1、首先看下js文件的目录结构

2、看下main.js文件的内容

require.config({

    paths: {

        angular: '../lib/angular/angular',

        angularRoute: '../lib/angular-route/angular-route',

        angularMocks: '../lib//angular-mocks/angular-mocks',

        text: '../lib/requirejs-text/text',

        ngFileUpload:'../lib/ng-file-upload/ng-file-upload',

        routeStyles:'../lib/angular-route-styles/route-styles',

        ueditorConfig:'../lib/ueditor/ueditor.config',

        ueditorAll:'../lib/ueditor/ueditor.all',

        uediter:'../lib/angular-ueditor/dist/angular-ueditor',

        pagination:'../lib/angularjs-pagination/src/ng-pagination'

    },

    shim: {

        'angular' : {'exports' : 'angular'},

        'angularRoute': ['angular'],

        'angularMocks': {

            deps:['angular'],

            'exports':'angular.mock'

        } ,

        'ngFileUpload': ['angular'],

        'routeStyles':['angular'],

        'uediter':['ueditorConfig','ueditorAll','angular'],

        'pagination':['angular']

    },

    priority: [

        "angular"

    ]

});

//http://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap

window.name = "NG_DEFER_BOOTSTRAP!";

require( [

    'angular',

    'app',

    'routes'

], function(angular, app, routes) {

    'use strict';

    var $html = angular.element(document.getElementsByTagName('html')[0]);  

    angular.element().ready(function() {

        angular.resumeBootstrap([app['name']]);

    });

});

3、看下app.js文件内容

define([

    'angular',

    'filters',

    'services',

    'directives',

    'controllers',

    'angularRoute',

    'ngFileUpload',

    'routeStyles',

    'pagination',

    'uediter'

    ], function (angular, filters, services, directives, controllers) {

        'use strict';  

        // Declare app level module which depends on filters, and services  

        return angular.module('myApp', [

            'ngRoute',

            'ngFileUpload',

            'ng.ueditor',

            'routeStyles',

            'ng-pagination',

            'myApp.controllers',

            'myApp.filters',

            'myApp.services',

            'myApp.directives'

        ], function($httpProvider) {

          // Use x-www-form-urlencoded Content-Type

          $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

          /**

           * The workhorse; converts an object to x-www-form-urlencoded serialization.

           * @param {Object} obj

           * @return {String}

           */

          var param = function(obj) {

            var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

            for(name in obj) {

              value = obj[name];

              if(value instanceof Array) {

                for(i=0; i<value.length; ++i) {

                  subValue = value[i];

                  fullSubName = name + '[' + i + ']';

                  innerObj = {};

                  innerObj[fullSubName] = subValue;

                  query += param(innerObj) + '&';

                }

              }

              else if(value instanceof Object) {

                for(subName in value) {

                  subValue = value[subName];

                  fullSubName = name + '[' + subName + ']';

                  innerObj = {};

                  innerObj[fullSubName] = subValue;

                  query += param(innerObj) + '&';

                }

              }

              else if(value !== undefined && value !== null)

                query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';

            }

            return query.length ? query.substr(0, query.length - 1) : query;

          };

          // Override $http service's default transformRequest

          $httpProvider.defaults.transformRequest = [function(data) {

            return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;

          }];

        });

});

4、路由文件routes.js文件下内容

define(['angular', 'app'], function(angular, app) {

    'use strict';  

    return app.config(['$routeProvider',function($routeProvider) {

        $routeProvider.when('/', {

            templateUrl: 'templates/main.html',//加载的模版

            controller: 'index' ,//加载的控制器

            css: 'stylesheets/dist/index.css'//加载的样式

        });

        $routeProvider.otherwise({redirectTo: '/'});

    }]);  

});

5、控制器（以下以分页服务为例子）

（1）controllers文件内容

define(['angular', 'services'], function (angular) {

    'use strict';  

    /* Controllers */ 

    return angular.module('myApp.controllers', ['myApp.services'])

        // Sample controller where service is being used

        .controller('index', ['$scope', '$injector', function ($scope, $injector) {

            require(['controllers/index'], function(index) {

                // injector method takes an array of modules as the first argument

                // if you want your controller to be able to use components from

                // any of your other modules, make sure you include it together with 'ng'

                // Furthermore we need to pass on the $scope as it's unique to this controller

                $injector.invoke(index, this, {'$scope': $scope});

            });

        }])

});

（2）index文件下内容

define([], function() {

    return ['$scope', '$http','$sce', 'pagination',function($scope, $http, $sce,pagination) {

        // You can access the scope of the controller from here

         $scope.posts = [];

 	    var getPosts= function () {

            var postData = {

                page: 1,

                pageSize: 10

            }

 	        var url = '/main'

            pagination.list($http,url,postData).success(function (response) {

            	console.log(response);

                // $scope.paginationConf.totalItems = response.total;

                $scope.posts = angular.forEach(angular.fromJson(response.posts), function (post) {

		            post.post = $sce.trustAsHtml(post.post);

		        });

            });

        }

 	    getPosts();

 	    $scope.onPageChange = function() {

	      // ajax request to load data

	      console.log($scope.currentPage);

	    };

	    // set pagecount in $scope

	    $scope.pageCount = 100;

        //配置分页基本参数

        /***************************************************************

        当页码和页面记录数发生变化时监控后台查询

        如果把currentPage和itemsPerPage分开监控的话则会触发两次后台事件。

        ***************************************************************/

        // $scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', getPosts);

        // because this has happened asynchroneusly we've missed

        // Angular's initial call to $apply after the controller has been loaded

        // hence we need to explicityly call it at the end of our Controller constructor

        $scope.$apply();

    }];

});

6、服务（没有找到方法实现按需加载如果有好的的方法实现像控制器那样按需加载请留言给我感激不尽，谢谢）

（1）services文件内容

define(['angular','require','services/pagination'], function (angular,require) {

    'use strict';  

  /* Services */ 

  // Demonstrate how to register services

  // In this case it is a simple value service.

    angular.module('myApp.services', [])

        .value('version', '0.1')

        .factory('pagination',function () {

            return require('services/pagination');

        })

});

（2）pagination文件下内容

define([], function() {

        var list = function ($http,url,postData) {

	        return $http.post(url, postData);

	    }

	    return {

	        list: function ($http,url,postData) {

	            return list($http,url,postData);

	        }

	    }

});

7、指令和过滤器实现和服务实现事一样的

（1）directives文件下内容

define(['angular', 'services'], function(angular, services) {

    'use strict';  

  /* Directives */ 

    angular.module('myApp.directives', ['myApp.services'])

        .directive('appVersion', ['version', function(version) {

            return function(scope, elm, attrs) {

                elm.text(version);

        };

    }]);

});

（2）filters文件内容

define(['angular', 'services'], function (angular, services) {

    'use strict';  

    /* Filters */ 

    angular.module('myApp.filters', ['myApp.services'])

        .filter('interpolate', ['version', function(version) {

            return function(text) {

                return String(text).replace(/\%VERSION\%/mg, version);

            };

    }]);

});

（注：如果有更好的实现方式或错误请留言给我或 demo地址给我谢谢）

未完待续（angular 深入理解和开发）　　

巴特西

gulp + angular + requirejs 简单学习

最新文章

热门文章