JSをカスタマイズするFoundation Sites構築サーバーを設定する

Question

Foundationサイトのローカルマシンにカスタムビルディング環境を設定する最も簡単な方法は何ですか？私は、JSファイルを編集し、プロジェクト要件に応じて、いくつかのコンポーネントを使って1つのJSファイルにコンパイルすることができます。基本的には、私はhttp://foundation.zurb.com/sites/download.html/のオンラインカスタマイズフォームと同じ機能を望んでいますが、マシン上でローカルに実行し、変更されたJSファイルをコンパイルします。あなたが成功して、ローカルマシン上のサイトのための基礎をインストールしている、あなたはこれを使用することができますと仮定

Answer 1

はgulpfile.js：

var gulp = require('gulp'); 
    var concat = require('gulp-concat'); 
    var uglify = require('gulp-uglify'); 
    var rename = require('gulp-rename'); 
    var sass = require('gulp-ruby-sass'); 
    var cache = require('gulp-cache'); 

    var $ = require('gulp-load-plugins')(); 

    var sassPaths = [ 
    'bower_components/foundation-sites/scss', 
    'bower_components/motion-ui/src' 
    ]; 

    gulp.task('sass', function() { 
    return gulp.src('scss/app.scss') 
     .pipe($.sourcemaps.init()) 
     .pipe($.sass({ 
     includePaths: sassPaths, 
     outputStyle: 'compressed' 
     }) 
     .on('error', $.sass.logError)) 
     .pipe($.autoprefixer({ 
     browsers: ['last 2 versions', 'ie >= 9'] 
     })) 
     .pipe($.sourcemaps.write()) 
     .pipe(gulp.dest('css')); 
    }); 

    // This task take do the concat of the .js files 
    gulp.task('scripts', function() { 
     // if some script depends on other you can choose what file import first 
     return gulp.src(
      [ 
       'bower_components/jquery/dist/jquery.js', 
       'bower_components/what-input/what-input.js', 
       'bower_components/foundation-sites/dist/foundation.js', 
       'js/*.js' 
      ] 
     ) 
     // here i concat all the files i read 
     .pipe(concat('app.js')) 
     .pipe(rename({suffix: '.min'})) 
     .pipe(uglify()) 
     // then i save it in the scripts folder 
     .pipe(gulp.dest('scripts')); 
    }); 



    gulp.task('default', ['sass', 'scripts', 'images'], function() { 
    gulp.watch(['scss/**/*.scss'], ['sass']); 
    gulp.watch(['js/**/*.js'], ['scripts']); 
    }); 

このファイルには、すべての.jsファイルは、あなたがbower_components（プラス運動-UIから必要なファイルを取ります）とあなたが 'js'フォルダに入れたすべての.jsファイル。次に、連結されたバージョンの連結ファイルをスクリプトに保存します。

あなただけのスクリプト/ app.min.jsをインポートする必要があり、あなたのHTMLページで

：

<script src="scripts/app.min.js"></script> 

（動作するためにあなたがgulpfile.jsの上に必要なモジュールをインストールする必要がありますのでご注意ください既に持っていない場合）