angularjs - How to start Gulp server for Yeoman app? -


  1. i'm trying build first application using yeoman + angular + gulp.
  2. i've created application using gulp, works fine.
  3. following step followed install application,

    1. npm install -g yo
    2. npm install -g generator-angular (in i've asked select between gulp , grunt, selected gulp)
    3. install gulp , related plugins mentioned in gulpjs file
    4. try run application using gulp

here gulpfile.js

    // generated on 2016-07-28 using generator-angular 0.15.1 'use strict';  var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var openurl = require('open'); var lazypipe = require('lazypipe'); var rimraf = require('rimraf'); var browsersync = require('browser-sync'); var wiredep = require('wiredep').stream; var runsequence = require('run-sequence');  var yeoman = {   app: require('./bower.json').apppath || 'app',   dist: 'dist' };  var paths = {   scripts: [yeoman.app + '/scripts/**/*.js'],   styles: [yeoman.app + '/styles/**/*.css'],   test: ['test/spec/**/*.js'],   testrequire: [     yeoman.app + '/bower_components/angular/angular.js',     yeoman.app + '/bower_components/angular-mocks/angular-mocks.js',     yeoman.app + '/bower_components/angular-resource/angular-resource.js',     yeoman.app + '/bower_components/angular-cookies/angular-cookies.js',     yeoman.app + '/bower_components/angular-sanitize/angular-sanitize.js',     yeoman.app + '/bower_components/angular-route/angular-route.js',     'test/mock/**/*.js',     'test/spec/**/*.js'   ],   karma: 'karma.conf.js',   views: {     main: yeoman.app + '/index.html',     files: [yeoman.app + '/views/**/*.html']   } };  //////////////////////// // reusable pipelines // ////////////////////////  var lintscripts = lazypipe()   .pipe($.jshint, '.jshintrc')   .pipe($.jshint.reporter, 'jshint-stylish');  var styles = lazypipe()   .pipe($.autoprefixer, 'last 1 version')   .pipe(gulp.dest, '.tmp/styles');  /////////// // tasks // ///////////  gulp.task('browser-sync', function() {     browsersync({         server: {             basedir: "./"         }     }); });   gulp.task('styles', function () {   return gulp.src(paths.styles)     .pipe(styles()); });  gulp.task('lint:scripts', function () {   return gulp.src(paths.scripts)     .pipe(lintscripts()); });  gulp.task('clean:tmp', function (cb) {   rimraf('./.tmp', cb); });  gulp.task('start:client', ['start:server', 'styles'], function () {   openurl('http://localhost:9000'); });  gulp.task('start:server', function() {   $.connect.server({     root: [yeoman.app, '.tmp'],     livereload: true,     // change '0.0.0.0' access server outside.     port: 9000   }); });  gulp.task('start:server:test', function() {   $.connect.server({     root: ['test', yeoman.app, '.tmp'],     livereload: true,     port: 9001   }); });  gulp.task('watch', function () {   $.watch(paths.styles)     .pipe($.plumber())     .pipe(styles())     .pipe($.connect.reload());    $.watch(paths.views.files)     .pipe($.plumber())     .pipe($.connect.reload());    $.watch(paths.scripts)     .pipe($.plumber())     .pipe(lintscripts())     .pipe($.connect.reload());    $.watch(paths.test)     .pipe($.plumber())     .pipe(lintscripts());    gulp.watch('bower.json', ['bower']); });  gulp.task('serve', function (cb) {   runsequence('clean:tmp',     ['lint:scripts'],     ['start:client'],     'watch', cb); });  gulp.task('serve:prod', function() {   $.connect.server({     root: [yeoman.dist],     livereload: true,     port: 9000   }); });  gulp.task('test', ['start:server:test'], function () {   var testtofiles = paths.testrequire.concat(paths.scripts, paths.test);   return gulp.src(testtofiles)     .pipe($.karma({       configfile: paths.karma,       action: 'watch'     })); });  // inject bower components gulp.task('bower', function () {   return gulp.src(paths.views.main)     .pipe(wiredep({       directory: yeoman.app + '/bower_components',       ignorepath: '..'     }))   .pipe(gulp.dest(yeoman.app + '/views')); });  /////////// // build // ///////////  gulp.task('clean:dist', function (cb) {   rimraf('./dist', cb); });  gulp.task('client:build', ['html', 'styles'], function () {   var jsfilter = $.filter('**/*.js');   var cssfilter = $.filter('**/*.css');    return gulp.src(paths.views.main)     .pipe($.useref({searchpath: [yeoman.app, '.tmp']}))     .pipe(jsfilter)     .pipe($.ngannotate())     .pipe($.uglify())     .pipe(jsfilter.restore())     .pipe(cssfilter)     .pipe($.minifycss({cache: true}))     .pipe(cssfilter.restore())     .pipe($.rev())     .pipe($.revreplace())     .pipe(gulp.dest(yeoman.dist)); });  gulp.task('html', function () {   return gulp.src(yeoman.app + '/views/**/*')     .pipe(gulp.dest(yeoman.dist + '/views')); });  gulp.task('images', function () {   return gulp.src(yeoman.app + '/images/**/*')     .pipe($.cache($.imagemin({         optimizationlevel: 5,         progressive: true,         interlaced: true     })))     .pipe(gulp.dest(yeoman.dist + '/images')); });  gulp.task('copy:extras', function () {   return gulp.src(yeoman.app + '/*/.*', { dot: true })     .pipe(gulp.dest(yeoman.dist)); });  gulp.task('copy:fonts', function () {   return gulp.src(yeoman.app + '/fonts/**/*')     .pipe(gulp.dest(yeoman.dist + '/fonts')); });  gulp.task('build', ['clean:dist'], function () {   runsequence(['images', 'copy:extras', 'copy:fonts', 'client:build']); });  gulp.task('default', ['build']); 

after following above steps on command line, application terminated.

use 'gulp serve' command start server.

to build : gulp build or gulp

run karma/jasmine test script : use 'gulp test'


Comments

Popular posts from this blog

magento2 - Magento 2 admin grid add filter to collection -

Android volley - avoid multiple requests of the same kind to the server? -

Combining PHP Registration and Login into one class with multiple functions in one PHP file -