フロントエンドプロジェクトの構築に関する別の投稿

npm -v 

 npm install -g gulp browserify babel jade stylus http-server 

 git clone https://github.com/alexfedoseev/js-app-starter.git 

 npm install 

 npm start 

 #    NODE_ENV=development #      lvh.me   3500 http-server -a lvh.me -p 3500 #  gulp  gulp 

 #    NODE_ENV=production #  gulp- `build` gulp build 

 /* file: lib/gulp/config.js */ html: { src: _src + _html, //   jade- dest: _public, //    params: { //   jade pretty: devBuild, //    html? locals: { // ,      pkgVersion: pkg.version //      `pkgVersion` } } } 

 /* file: lib/gulp/tasks/html.js */ var gulp = require('gulp'), jade = require('gulp-jade'), jadeInherit = require('gulp-jade-inheritance'), gulpif = require('gulp-if'), changed = require('gulp-changed'), filter = require('gulp-filter'), notifier = require('../helpers/notifier'), config = require('../config').html; gulp.task('html', function(cb) { //   jade-   src/html gulp.src(config.src + '*.jade') //  dev-,  watcher     .pipe(gulpif(devBuild, changed(config.dest))) //    .pipe(jadeInherit({basedir: config.src})) //  - ( `_` ) .pipe(filter(function(file) { return !/\/_/.test(file.path) || !/^_/.test(file.relative); })) //  jade  html .pipe(jade(config.params)) //  html- .pipe(gulp.dest(config.dest)) //     .on('end', function() { notifier('html'); //  (  + ) cb(); // gulp-callback,     }); }); 

 | src |-- html |-- index.jade #   |-- components/ #   |-- _header.jade |-- helpers/ # ,  |-- _params.jade |-- _mixins.jade |-- meta/ #  head,    . |-- _head.jade 

 /* file: src/html/helpers/_variables.jade */ - var release = pkgVersion //   gulp- - var phone = '8 800 CALL-ME-NOW' //  

 /* file: src/html/helpers/_mixins.jade */ mixin phoneLink(phoneString) - var cleanPhone = phoneString.replace(/\(|\)|\s|\-/g, '') a(href="tel:#{cleanPhone}")= phoneString //    // +phoneLink(phone) 

 /* file: src/html/index.jade */ include helpers/_variables //   include helpers/_mixins //   doctype html html head include meta/_head body include components/_header include components/_some_component include components/_footer 

 /* file: src/html/meta/_head.jade */ meta(charset="utf-8") ... //   ,    js/css    link(rel="stylesheet" href="css/app.min.css?v=#{release}") script(src="js/app.min.js?v=#{release}") ... 

 /* file: lib/gulp/config.js */ /*   */ var bundles = [ { name : 'myLib', //   global : 'myLib', //   ,      compress : true, // ? (   ) saveToDist : true //    `/dist`? } ]; /*   /   */ var bundles = [ { name : 'app', //   global : false, //     compress : true, // ? saveToDist : false //    `/dist`? }, name : 'admin', global : false, compress : true, saveToDist : false } ]; 

 /* file: lib/gulp/config.js */ scripts: { bundles: bundler(bundles, _js, _src, _dist, _public), //   banner: '/** ' + pkg.name + ' v' + pkg.version + ' **/\n', //     min.js extensions: ['.jsx'], //    lint: { //   jshint options: pkg.lintOptions, dir: _src + _js } } 

 /* file: lib/gulp/tasks/scripts.js */ var gulp = require('gulp'), browserify = require('browserify'), watchify = require('watchify'), uglify = require('gulp-uglify'), sourcemaps = require('gulp-sourcemaps'), derequire = require('gulp-derequire'), source = require('vinyl-source-stream'), buffer = require('vinyl-buffer'), rename = require('gulp-rename'), header = require('gulp-header'), gulpif = require('gulp-if'), notifier = require('../helpers/notifier'), config = require('../config').scripts; gulp.task('scripts', function(cb) { //  -  var queue = config.bundles.length; //     ,    , //      bundle-   //      var buildThis = function(bundle) { //  bundle browserify var pack = browserify({ //   sourcemaps cache: {}, packageCache: {}, fullPaths: devBuild, //   end-point (app.js) entries: bundle.src, //   ,     // browserify    UMD- //        bundle.global standalone: bundle.global, //   extensions: config.extensions, //  sourcemaps? debug: devBuild }); //  var build = function() { return ( // browserify- pack.bundle() //  browserify-  vinyl .pipe(source(bundle.destFile)) //   ,    `require`   .pipe(derequire()) //  dev-,      `public/` ( -  )) .pipe(gulpif(devBuild, gulp.dest(bundle.destPublicDir))) //     `dist` -  .pipe(gulpif(bundle.saveToDist, gulp.dest(bundle.destDistDir))) //     sourcemaps   .pipe(gulpif(bundle.compress, buffer())) //  dev-    —  sourcemaps .pipe(gulpif(bundle.compress && devBuild, sourcemaps.init({loadMaps: true}))) //  .pipe(gulpif(bundle.compress, uglify())) //      `.min` .pipe(gulpif(bundle.compress, rename({suffix: '.min'}))) //    production -        .pipe(gulpif(!devBuild, header(config.banner))) //  sourcemaps .pipe(gulpif(bundle.compress && devBuild, sourcemaps.write('./'))) //     `/dist` .pipe(gulpif(bundle.saveToDist, gulp.dest(bundle.destDistDir))) //   `public` .pipe(gulp.dest(bundle.destPublicDir)) //    callback handleQueue ( ) .on('end', handleQueue) ); }; //   watchers if (global.isWatching) { //  browserify-  watchify pack = watchify(pack); //      -   pack.on('update', build); } //     var handleQueue = function() { // ,    notifier(bundle.destFile); //    if (queue) { //   1 queue--; //    ,  ,    if (queue === 0) cb(); } }; return build(); }; //      config.bundles.forEach(buildThis); }); 

 | src/ |-- js/ |-- components/ #   |-- helpers/ # js- |-- app.js # end-point  

 /* file: src/js/app.js */ /* Vendor */ import $ from 'jquery'; /* Components */ import myComponent from './components/my-component'; /* App */ $(document).ready(() => { myComponent(); }); 

 /* file: package.json */ "browserify": { "transform": [ "babelify", "browserify-shim" //   ] }, //  `browserify-shim`     //    github: https://github.com/thlorenz/browserify-shim "browser": { "maskedinput": "./path/to/jquery.maskedinput.js" }, "browserify-shim": { "maskedinput": { "exports": "maskedinput", "depends": [ "jquery:jQuery" ] } } 

 require('maskedinput'); 

 /* file: lib/gulp/config.js */ css: { bundles: bundler(bundles, _css, _src, _dist, _public), //   src: _src + _css, //      watcher params: {}, //     stylus -   autoprefixer: { //  autoprefixer browsers: ['> 1%', 'last 2 versions'], //     cascade: false //   ,    }, compress: {} //     -   } 

 /* file: lib/gulp/tasks/css.js */ var gulp = require('gulp'), process = require('gulp-stylus'), prefix = require('gulp-autoprefixer'), compress = require('gulp-minify-css'), gulpif = require('gulp-if'), rename = require('gulp-rename'), notifier = require('../helpers/notifier'), config = require('../config').css; /*  css-   js- */ gulp.task('css', function(cb) { var queue = config.bundles.length; var buildThis = function(bundle) { var build = function() { return ( gulp.src(bundle.src) .pipe(process(config.params)) .pipe(prefix(config.autoprefixer)) .pipe(gulpif(bundle.compress, compress(config.compress))) .pipe(gulpif(bundle.compress, rename({suffix: '.min'}))) .pipe(gulp.dest(bundle.destPublicDir)) .on('end', handleQueue) ); }; var handleQueue = function() { notifier(bundle.destFile); if (queue) { queue--; if (queue === 0) cb(); } }; return build(); }; config.bundles.forEach(buildThis); }); 

 | src/ |-- css/ |-- components/ #   |-- header.styl |-- footer.styl |-- globals/ |-- fonts.styl #   |-- global.styl #    |-- normalize.styl #  /  |-- variables.styl #  |-- z-index.styl # z-  |-- helpers/ |-- classes.styl #   |-- mixins.styl #   |-- sprite/ |-- sprite.json # json,  gulp.spritesmith |-- sprite.styl #   json css- |-- vendor/ #  css   |-- app.styl # end-point  

 /* file: src/css/app.styl */ @import "helpers/mixins" @import "helpers/classes" @import "globals/variables" @import "globals/normalize" @import "globals/z-index" @import "globals/fonts" @import "globals/global" @import "sprite/sprite" @import "vendor/*" @import "components/*"