Question

在Foundation网站的本地计算机上设置自定义建筑环境的最简单方法是什么？我希望能够编辑JS文件，然后根据我的项目要求，仅使用一些组件将它们编译成一个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']);
  });

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

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

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

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

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

1 个答案: