Ищем простые инструменты для Frontend, но находим примеры gulpfile.js с Hexo API

Поиски аналога Panini для EJS присели меня к Harp, однако он не захотел устанавливаться на мой ноутбук. Мне стало стыдно перед GULP, я просмотрел плагины по темам "Gulp ejs", "Gulp hexo", потом подумал об альтернативах: испоьзовать плагины для Atom, поставить ядро ijavascript на Jupyter Notebook... а потом научился искать Gulpfile.js на Github и скопиастил сюда фрагменты файлов.

ejs-playground
EJS support for Atom.
gulp-watch-ejs Gulp plugin for using gulp-watch to watch ejs templates and sub templates included by <% include xx %>
ejs-compile Pre-compile ejs templates.
gulp-ejs-compile
27 results for ‘gulp ejs’

embeddedjs.com Online ejs compiler
How can I pass variable to ejs.compile

Installing kernels Kernels for other languages can be found in the IPython wiki. They usually come with instruction what to run to make the kernel available in the notebook.
ijavascript IJavascript is an npm package that implements a Javascript kernel for the Jupyter notebook (formerly known as IPython notebook). A Jupyter notebook combines the creation of rich-text documents (including equations, graphs and videos) with the execution of code in a number of programming languages.
to install IJavascript The instructions to install IJavascript are platform-dependent and very much determined by the following dependencies
Optional: Installing Kernels This information gives a high-level view of using Jupyter Notebook with different programming languages (kernels).

gulp-ejs A plugin for Gulp that parses ejs template files
gulp-connect Gulp plugin to run a webserver (with LiveReload)
Gulp + Ejs + Sass + CoffeeScript + LiveReload Шаблон для быстрой и комфортной верстки
Gulp, EJS, Sass(FLOCSS), Hologram - на японском языке, но там и EJS c Data Gulp продвинутый
Spycejs Gulp - еще один крутой японец
gurunavi-creators/gnavi-gulp-boiler-ejs
gnavi-gulp-boiler-ejs-postcss/gulpfile.js

)RunKit The rest of the gulpfile is here: hexo-theme-zurb-foundation
Setting up Gulp with Express and Livereload

Harp, Gulp And BrowserSync
Harp, Gulp And BrowserSync A ready-to-go Gulp and Harp set up that does auto css injection via BrowserSync.
Harp Documentation

hexo-theme-zurb-foundation/gulpfile.js¶

In [ ]:

var gulp        = require('gulp'),
    browserSync = require('browser-sync'),
    sass        = require('gulp-sass'),
    bower       = require('gulp-bower'),
    notify      = require('gulp-notify'),
    reload      = browserSync.reload,
    bs          = require("browser-sync").create(),
    Hexo        = require('hexo'),
    hexo        = new Hexo(process.cwd(), {}),
    clean = require('gulp-clean');

var src = {
    scss: './scss/',
    css:  './source/css',
    ejs: 'layout'
},
watchFiles = [
    './scss/*.scss',
    '*/*.ejs'
];


// Static Server + watching scss/html files
gulp.task('serve', ['sass:watch'], function() {

    hexo.init.then(function(){
      return hexo.call('generate', {watch: true});
    }).catch(function(err){
      console.log(err);
    });

    // init starts the server
    bs.init(watchFiles, {
        server: {
            baseDir: "../../public"
        },
        logLevel: "debug"
    });

    hexo.init.then(function(){
      return hexo.call('generate', {watch: true});
    }).catch(function(err){
      console.log(err);
    });

});



gulp.task('build', ['clean', 'copy']);

gulp.task('copy', function (cb) {
    gulp.src(['../../public/**/*'])
        .pipe(gulp.dest('public'));

});

gulp.task('clean', function () {
    return gulp.src('public', {read: false})
            .pipe(clean({force: true}))
});



// Compile sass into CSS
gulp.task('sass', function() {
    // gulp.src(src.scss + "/*/*.scss")
    gulp.src(src.scss + "{,*}/*.scss")
        .pipe(sass({}))
        // .pipe(gulp.dest(src.css))
        .pipe(gulp.dest('../../source/css/'))
        .pipe(reload({stream: true}));
});

gulp.task('sass:watch', function () {
  gulp.watch('./scss/**/*.scss', ['sass']);
});


gulp.task('bower', function() {
  return bower()
    .pipe(gulp.dest('source/lib'))
});

gulp.task('default', ['serve']);

Gulp + Ejs + Sass + CoffeeScript + LiveReload Шаблон для быстрой и комфортной верстки¶

In [ ]:

var gulp = require('gulp');
var gulpConnect = require('gulp-connect');
var gulpLess = require('gulp-less');
var gulpEjs = require('gulp-ejs');
var src = 'src';

var out = 'public';

gulp.task("connect", function () {
  return gulpConnect.server({
    root: "public",
    port: 1337,
    livereload: true
  });
});

gulp.task('ejs', function () {
  return gulp.src([src + '/*.ejs'])
    .pipe(gulpEjs())
    .pipe(gulp.dest(out + '/'))
    .pipe(gulpConnect.reload());
});

gulp.task('less', function () {
  return gulp.src('./src/less/**/*.less')
    .pipe(gulpLess())
    .pipe(gulp.dest('./public/css/'))
    .pipe(gulpConnect.reload());
});

gulp.task('watch', function () {
  gulp.watch([src + '/less/*.less', src + '/less/**/*.less'], ['less']);
  return gulp.watch([src + '/*.ejs', src + '/ejs/**/*.ejs'], ['ejs']);
});

gulp.task('default', ['connect', 'less', 'ejs', 'watch']);

Gulpfile for building my spacious theme for hexo

In [ ]:

'use strict';

var gulp = require('gulp'),
    $ = require('gulp-load-plugins')(),
    runSequence = require('run-sequence');

var cdnizerOptions = {
    defaultCDN: 'cdnjs',
    files: [
        {
            file: '/js/vendor/jquery.js',
            cdn: 'cdnjs:jquery:jquery.min.js@2.1.4'
        },
        {
            file: '/js/vendor/livestamp.js',
            cdn: 'cdnjs:livestamp:livestamp.min.js@1.1.2'
        },
        {
            file: '/js/vendor/moment-with-locales.js',
            cdn: 'cdnjs:moment.js:moment-with-locales.min.js@2.10.3'
        }
    ]
};
var htmlMinifierOptions = {
      removeComments: true,
      collapseWhitespace: true,
      collapseBooleanAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true,
      removeOptionalTags: true
};

gulp.task('production', function(callback){
     runSequence('clean', 'generate', 'pack', 'deploy', callback);
});
gulp.task('pack', ['optipng'], function(){

    var assets = $.useref.assets({
        searchPath: 'public'
    });

    return gulp.src('public/**/*.html')
        .pipe($.cdnizer(cdnizerOptions))
        .pipe(assets)
        .pipe($.if('*.css', $.minifyCss()))
        .pipe($.if('*.js', $.uglify()))
        .pipe($.rev())
        .pipe(assets.restore())
        .pipe($.revReplace())
        .pipe($.useref())
        .pipe($.if('*.html', $.htmlMinifier(htmlMinifierOptions)))
        .pipe(gulp.dest('public'));
});

gulp.task('optipng', function(){
    return gulp.src('public/**/*.png')
        .pipe($.optipng())
        .pipe(gulp.dest('public'));
});

gulp.task('optipng-source', function(){
    return gulp.src('source/_posts/**/*.png')
        .pipe($.optipng())
        .pipe(gulp.dest('source/_posts'));
});

['clean', 'generate', 'deploy', 'server'].forEach(function(i){
    gulp.task(i, $.shell.task('hexo ' + i));
});

gulp.task('static', $.shell.task('hexo server -s'));
gulp.task('drafts', $.shell.task('hexo server --drafts'));

sample of gulpfile.js for hexo generate blog, compress public files¶

In [ ]:

/* Refrences:
1. http://notes.iissnan.com/2016/publishing-github-pages-with-travis-ci
2. https://github.com/chrisjlee/hexo-theme-zurb-foundation/blob/e82f45a82bbaaee063bcb1298cd9793575afb142/gulpfile.js
3. https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md
4. https://hexo.io/api/
5. https://github.com/iissnan/theme-next-docs/blob/master/.travis.yml
*/

var gulp = require('gulp');
var minifycss = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
var del = require('del');
var runSequence = require('run-sequence');
var Hexo = require('hexo');


gulp.task('clean', function() {
    return del(['public/**/*']);
});

// generate html with 'hexo generate'
var hexo = new Hexo(process.cwd(), {});
gulp.task('generate', function(cb) {
    hexo.init().then(function() {
        return hexo.call('generate', {
            watch: false
        });
    }).then(function() {
        return hexo.exit();
    }).then(function() {
        return cb()
    }).catch(function(err) {
        console.log(err);
        hexo.exit(err);
        return cb(err);
    })
})

gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./public'));
});

gulp.task('minify-html', function() {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))
});

gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});

gulp.task('minify-img', function() {
    return gulp.src('./public/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('./public/images'))
})

gulp.task('compress', function(cb) {
    runSequence(['minify-html', 'minify-css', 'minify-js', 'minify-img'], cb);
});


//gulp.task('build', ['clean', 'generate', 'compress']);
gulp.task('build', function(cb) {
    runSequence('clean', 'generate', 'compress', cb)
});

gulp.task('default', [])

hexo-theme-zurb-foundation¶

In [ ]:

var gulp        = require('gulp'),
    browserSync = require('browser-sync'),
    sass        = require('gulp-sass'),
    bower       = require('gulp-bower'),
    notify      = require('gulp-notify'),
    reload      = browserSync.reload,
    bs          = require("browser-sync").create(),
    Hexo        = require('hexo'),
    hexo        = new Hexo(process.cwd(), {}),
    clean = require('gulp-clean');

var src = {
    scss: './scss/',
    css:  './source/css',
    ejs: 'layout'
},
watchFiles = [
    './scss/*.scss',
    '*/*.ejs'
];


// Static Server + watching scss/html files
gulp.task('serve', ['sass:watch'], function() {

    hexo.init.then(function(){
      return hexo.call('generate', {watch: true});
    }).catch(function(err){
      console.log(err);
    });

    // init starts the server
    bs.init(watchFiles, {
        server: {
            baseDir: "../../public"
        },
        logLevel: "debug"
    });

    hexo.init.then(function(){
      return hexo.call('generate', {watch: true});
    }).catch(function(err){
      console.log(err);
    });

});



gulp.task('build', ['clean', 'copy']);

gulp.task('copy', function (cb) {
    gulp.src(['../../public/**/*'])
        .pipe(gulp.dest('public'));

});

gulp.task('clean', function () {
    return gulp.src('public', {read: false})
            .pipe(clean({force: true}))
});



// Compile sass into CSS
gulp.task('sass', function() {
    // gulp.src(src.scss + "/*/*.scss")
    gulp.src(src.scss + "{,*}/*.scss")
        .pipe(sass({}))
        // .pipe(gulp.dest(src.css))
        .pipe(gulp.dest('../../source/css/'))
        .pipe(reload({stream: true}));
});

gulp.task('sass:watch', function () {
  gulp.watch('./scss/**/*.scss', ['sass']);
});


gulp.task('bower', function() {
  return bower()
    .pipe(gulp.dest('source/lib'))
});

gulp.task('default', ['serve']);

new-site/gulpfile.js¶

Hexo/Gulp generator for the reapp.github.io repository http://reapp.io

In [ ]:

var gulp = require('gulp');
var wrap = require('gulp-wrap');
var concat = require('gulp-concat');

var buildDir = './gen';
var outDir = './source';
var packages = [
  'routes',
  'component',
  'platform',
  'request',
  'reducer',
  'object-assign',
  'pack',
  'server'
];

var core = [
  'animations',
  // TODO: Determine if we need 'styles' here.
  // If not, remove the placeholder file at ../reapp-ui/docs/core/styles.md.
  // If so, document it properly in that file and reference it in ./README.md;
  // also, uncomment it in ./themes/landscape/layout/_partial/docs_nav.ejs.
  'styles',
  'themes',
  // TODO: Determine if we need 'viewlists' here.
  // If not, remove the placeholder file at ../reapp-ui/docs/core/viewlists.md.
  // If so, document it properly in that file and reference it in ./README.md;
  // also, uncomment it in ./themes/landscape/layout/_partial/docs_nav.ejs.
  'viewlists'
];

var src = {
  start: '../reapp/README.md',

  // docs
  // TODO: Split ../reapp-ui/docs/components/components.md into multiple files, one for each component.
  components: '../reapp-ui/docs/components/*',
  views: '../reapp-ui/docs/views/*',
  ui: '../reapp-ui/README.md',
  packages: packages.map(function(name) {
    return '../reapp-' + name + '/README.md';
  }),
  core: core.map(function(name) {
    return '../reapp-ui/docs/core/' + name + '.md';
  })
};


// PAGES

gulp.task('packages', function() {
  return move('packages');
});

gulp.task('components', function() {
  return move('components');
});

gulp.task('views', function() {
  return move('views');
});

gulp.task('ui', function() {
  return move('ui');
});

gulp.task('start', function() {
  return move('start', 'start');
});

gulp.task('core', function() {
  return core.forEach(function(name, i) {
    gulp
      .src(src.core[i], { base: '../' })
      .pipe(concat('docs-' + name + '.md'))
      .pipe(wrap(header(name, 'docs')))
      .pipe(gulp.dest(outDir));
  });
});

function move(name, layout) {
  layout = layout || 'docs';

  return gulp
    .src(src[name], { base: '../' })
    .pipe(concat(name + '.md'))
    .pipe(wrap(header(name, layout)))
    .pipe(gulp.dest(outDir));
}

function header(name, layout) {
  return [
    'layout: ' + layout,
    'title: ' + name,
    '---',
    '<%= contents %>'
  ].join("\n");
}

// WATCH

gulp.task('watch', function() {
  gulp.watch([src.packages], ['packages']);
  gulp.watch([src.start], ['start']);
  gulp.watch([src.components], ['components']);
  gulp.watch([src.views], ['views']);
  gulp.watch([src.ui], ['ui']);
  gulp.watch([src.core], ['core']);
});

gulp.task('default', ['packages', 'components', 'views', 'start', 'core', 'ui']);
Contact GitHub API Training Shop Blog About
© 2016 GitHub, Inc. Terms Privacy Security Status Help

equip/gulpfile.js¶

Gulp, EJS, Sass(FLOCSS), Hologram

In [ ]:

var gulp = require('gulp');
// EJS
var ejs = require("gulp-ejs");
// Sass
var sass = require('gulp-sass')
var autoprefixer = require('gulp-autoprefixer');
var csscomb = require('gulp-csscomb');
var cleanCss = require('gulp-clean-css')
// Image
var imagemin = require('gulp-imagemin');
// Iconfont
var iconfont = require('gulp-iconfont');
var iconfontCss = require('gulp-iconfont-css');
// Utility
var rimraf = require('rimraf');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var notify = require("gulp-notify");
var runSequence = require('run-sequence');
// browser-sync
var browserSync = require('browser-sync');
// Styleguide
var hologram = require('gulp-hologram');
...

Searc github "gulp-liquid"

Поиск gulp-liquid тоже оказался полезным, сначала generator-liquid с плагинами, которые он использует

generator-liquid/generators/static/templates/gulp/gulpfile.js gulp-file-include, gulp-group-css-media-queries, gulp-iconfont, gulp-changed
Gulp Liquid Plugin, using Tinyliquid
tinyliquid A Liquid syntax template engine.

In [ ]:

var autoprefixer = require('gulp-autoprefixer'),
 bower = require('./bower.json'),
 browserSync = require('browser-sync').create(),
 changed = require('gulp-changed'),
 concat = require('gulp-concat'),
 cssmin = require('gulp-cssmin'),
 fileinclude = require('gulp-file-include'),
 gcmq = require('gulp-group-css-media-queries'),
 header = require('gulp-header'),
 iconfont = require('gulp-iconfont'),
 notify = require('gulp-notify'),
 package = require('./package.json'),
 plumber = require('gulp-plumber'),
 reload = browserSync.reload,
 replace = require('gulp-replace'),
 runSequence = require('run-sequence'),
 sass = require('gulp-sass'),
 uglify = require('gulp-uglify');
...

gulping-liquids/gulpfile.js

In [ ]:

const gulp = require('gulp')
const browserSync = require('browser-sync').create()
const sass = require('gulp-sass')
const liquify = require('gulp-liquify')

// NOTE: dumbdata will not reload when browserSync is triggered as it is 
// a build level dependancy
var dumbdata = require('./dumbdata')


gulp.task('serve', ['sass', 'move', 'liquify'], function() {
  browserSync.init({
    server: './dist',
    port:1337
  })
  gulp.watch('src/**', ['liquify'])
  gulp.watch('src/**', ['move'])
  gulp.watch('src/sass/*.scss', ['sass'])
  gulp.watch('dist/**').on('change', browserSync.reload)
})
gulp.task('liquify', () => {
  console.log('liquid template compilation example')
  gulp.src('./src/html/*.html')
      .pipe(liquify(dumbdata, { base: "./src/html/liquid-partials/" }))
      .pipe(gulp.dest('./dist/'))
})
gulp.task('move', function(){
  gulp.src('src/js/*.js').pipe(gulp.dest('dist/js'))
  gulp.src('src/sass/fonts/**').pipe(gulp.dest('dist/css/fonts'))
  gulp.src('src/img/**').pipe(gulp.dest('dist/img'))
})
gulp.task('sass', function() {
  return gulp.src('src/sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'))
    .pipe(browserSync.stream())
})

gulp.task('default', ['serve'])

// example task construction
// gulp.task('{command line command}', ['{task that will run}'])

harp-gulp-browsersync-boilerplate/gulpfile.js¶

А с hurp я было начал, но он не установился у меня, так что все, что выше - это то, что я нашел после этой неудачи, а то, что ниже - для размышлений... Почему мне понравился этот самый Hurp

In [ ]:

var gulp        = require('gulp');
var browserSync = require('browser-sync');
var reload      = browserSync.reload;
var harp        = require('harp');

/**
 * Serve the Harp Site from the src directory
 */
gulp.task('serve', function () {
  harp.server(__dirname, {
    port: 9000
  }, function () {
    browserSync({
      proxy: "localhost:9000",
      open: false,
      /* Hide the notification. It gets annoying */
      notify: {
        styles: ['opacity: 0', 'position: absolute']
      }
    });
    /**
     * Watch for scss changes, tell BrowserSync to refresh main.css
     */
    gulp.watch(["*.css", "*.sass", "*.scss", "*.less"], function () {
      reload("main.css", {stream: true});
    });
    /**
     * Watch for all other changes, reload the whole page
     */
    gulp.watch(["*.html", "*.ejs", "*.jade", "*.js", "*.json", "*.md"], 
               function () {
      reload();
    });
  })
});

/**
 * Default task, running `gulp` will fire up the Harp site,
 * launch BrowserSync & watch files.
 */
gulp.task('default', ['serve']);

Посты чуть ниже также могут вас заинтересовать