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

What is the easiest way to set up a custom building environment on the local machine for the Foundation sites? I want to be able to edit the JS files and then compile them into one JS file only using some components, depending on my project requirements. Basically I want the same functionality as the online customization form at http://foundation.zurb.com/sites/download.html/, but running it locally on my machine and compiling the modified JS files.

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

1 个解决方案

#1

Assuming you have installed with success the foundation for site on your local machine, you can use this gulpfile.js:

假设您已成功安装本地计算机上的站点基础,您可以使用此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']);
  });

This file take every .js file you need from bower_components (plus motion-ui) and all the .js files you put in 'js' folder. Then save a minified version of the concat file in scripts.

这个文件从bower_components(加上motion-ui)和你放在'js'文件夹中的所有.js文件中获取你需要的每个.js文件。然后在脚本中保存缩小版本的concat文件。

In your HTML page you have to import just the script/app.min.js:

在HTML页面中,您只需导入脚本/ app.min.js:

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

Please note that in order to work you have to install the modules required on top of gulpfile.js (if you don't have it already)

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

#1