F
F
faragly2015-06-19 18:06:42
JavaScript
faragly, 2015-06-19 18:06:42

How to properly build an AngularJS application with Browserify and Gulp?

Hello! I have an AngularJS application with the following structure

├── app
│   ├── controllers
│   │    └── mainctrl.coffee
│   ├── directives
│   │    └── clockface.coffee
│   ├── app.coffee

If you connect everything separately, everything works. You need to build the same with Gulp + Browserify.
app.coffee:
require('angular')
require('angular-route')
require('angular-resource')
require('angular-animate')
require('angular-md5')
app = angular.module 'app', ['ngRoute', 'ngResource', 'ngAnimate', 'ngMd5']
app.controller 'MainCtrl', require './controllers/mainctrl'
app.directive 'ngClockface', require './directives/clockface'

clockface.coffee with the following content:
module.exports = ->
  restrict: 'A'
  require: 'ngModel'
  link: (scope, element, attrs, ngModelCtrl) ->
    jQuery(element).clockface format: 'HH:mm'
      .on 'pick.clockface', (e, data) ->
        ngModelCtrl.$setViewValue moment({hours:data.hour, minutes:data.minute}).format("HH:mm")
        scope.$apply()

and mainctrl.coffee:
module.exports = ['$scope', '$rootScope', '$timeout', '$compile', '$http', 'md5', ($scope, $rootScope, $timeout, $compile, $http, md5) -> 
  ###
  тут код контроллера
  ###
]

I found something similar , but I can not get it on my example. Please help build the application.
PS I collect gulp and coffee-script (gulpfile.coffee):
gulp        = require 'gulp'
browserify  = require 'browserify'
watchify    = require 'watchify'
coffeeify   = require 'coffeeify'
source      = require 'vinyl-source-stream'
buffer      = require 'vinyl-buffer'
browserSync = do require('browser-sync').create
jade        = require 'gulp-jade'
stylus      = require 'gulp-stylus'
imagemin    = require 'gulp-imagemin'
nib         = require 'nib'
del         = require 'del'
colors      = require 'colors'
uglify      = require 'gulp-uglify'
concat      = require 'gulp-concat'
rename      = require 'gulp-rename'

files = [
  {
    input      : ['./src/coffee/app/app.coffee']
    output     : 'bundle.js'
    transform  : ['coffeeify']
    extensions : ['.coffee']
    destination: './dist/js/'
  }
]

createBundle = (options) -> 
  params = 
    entries: options.input
    extensions: options.extensions
    transform: options.transform
    cache: {}
    debug: true
  bundler = if global.isWatching then watchify(browserify(params)) else browserify(params)
 
  rebundle = ->
    startTime = new Date().getTime()
    bundler.bundle()
    .on 'error', ->
      console.log arguments
    .pipe source(options.output)
    .pipe buffer()
    .pipe uglify()
    .pipe rename suffix: '.min'
    .pipe gulp.dest(options.destination)
    .on 'end', ->
      time = (new Date().getTime() - startTime) / 1000
      console.log "#{options.output.cyan} was browserified: #{(time + 's').magenta}"
    .pipe browserSync.reload stream: true
  if global.isWatching
    bundler.on 'update', rebundle
 
  rebundle()
 
createBundles = (bundles) ->
  bundles.forEach (bundle) ->
    createBundle
      input      : bundle.input
      output     : bundle.output
      transform  : bundle.transform
      extensions : bundle.extensions
      destination: bundle.destination

# Собираем browserify файлы
gulp.task 'browserify', ->
  createBundles files

# Указываем флаг для watchify
gulp.task 'setWatch', -> 
  global.isWatching = true

# Очищаем папку public
gulp.task 'clean', -> 
  del ['./public/*'], (err, paths) -> 
    console.log 'Deleted files/folders:\n', paths.join '\n'

# Компиляция стилей css
gulp.task 'stylus', -> 
  gulp.src './src/styl/**/[^_]*.styl'
    .pipe stylus
      use: do nib
#      compress: true
    .on 'error', console.log 
    .pipe gulp.dest './public/css/'
    .pipe browserSync.stream match: '**/*.css'

# Копируем boostrap
gulp.task 'bootstrap', ->
  gulp.src './node_modules/bootstrap/dist/**/*'
    .pipe gulp.dest './public/assets/bootstrap/'

# Задача, которая компилирует jade в html
gulp.task 'jade', -> 
  gulp.src './src/[^_]*.jade'
    .pipe jade pretty: true
    .on 'error', console.log 
    .pipe gulp.dest './public/' 
    .pipe browserSync.reload stream: true

gulp.task 'imagemin', -> 
  gulp.src './src/img/**/*'
    .pipe do imagemin
    .pipe gulp.dest './public/img/'

# Создадим веб-сервер, чтобы работать с проектом через браузер
gulp.task 'server', ['watch'], -> 
  browserSync.init server: "./public", port: 8080
  console.log 'Сервер работает по адресу http://localhost:8080'

# Создадим задачу, смотрящую за изменениями
gulp.task 'watch', ['setWatch', 'browserify', 'jade', 'stylus', 'bootstrap'], -> 
  gulp.watch './src/styl/**/*.styl', ['stylus']
  gulp.watch './src/*.jade', ['jade']
  return

gulp.task 'default', ['server']

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question