Здравствуйте! Есть AngularJS приложение со следующей структурой
├── app
│ ├── controllers
│ │ └── mainctrl.coffee
│ ├── directives
│ │ └── clockface.coffee
│ ├── app.coffee
Если подключать все отдельно, все работает. Необходимо то же самое собрать с помощью 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 со следующим содержанием:
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()
и mainctrl.coffee:
module.exports = ['$scope', '$rootScope', '$timeout', '$compile', '$http', 'md5', ($scope, $rootScope, $timeout, $compile, $http, md5) ->
###
тут код контроллера
###
]
Нашел что то
подобное, но не удается завести на своем примере. Помогите пожалуйста собрать приложение.
P.S. собираю gulp'ом и 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']
