设置 Foundation 站点构建服务器以自定义 JS答案

【问题标题】：Setting up a Foundation sites building server to customize JS设置 Foundation 站点构建服务器以自定义 JS
【发布时间】：2016-06-29 21:11:48
【问题描述】：

在本地机器上为基金会站点设置自定义构建环境的最简单方法是什么？我希望能够编辑 JS 文件，然后根据我的项目要求仅使用一些组件将它们编译成一个 JS 文件。基本上我想要与http://foundation.zurb.com/sites/download.html/ 的在线定制表单相同的功能，但在我的机器上本地运行它并编译修改后的 JS 文件。

【问题讨论】：

StackOverflow 不是一个教程网站。您能否以代码的形式发布您迄今为止所做的工作？
我已经做了这个 git clone github.com/zurb/foundation-sites cd foundation-sites gem install scss-lint npm install 设置了环境，但是不知道怎么根据我需要的一组组件
有一个“customizer”文件夹，里面似乎有所有组件的配置，但我不知道如何使用它。
好的，'gulp' 文件夹中有一个自定义程序.js 文件，其中包含自定义构建的任务。在主 gulpfile.js 中运行此任务会将自定义构建创建为 .zip 文件

标签： javascript zurb-foundation customization

【解决方案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']);
  });

此文件从 bower_components（加上 motion-ui）中获取您需要的每个 .js 文件以及您放入“js”文件夹中的所有 .js 文件。然后在脚本中保存 concat 文件的缩小版本。

在您的 HTML 页面中，您只需导入 script/app.min.js：

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

请注意，为了工作，您必须在 gulpfile.js 之上安装所需的模块（如果您还没有）

【讨论】：