Example #1
0
 Mincer.StylusEngine.registerConfigurator(function (style) {
   style.use(nib());
 });
Example #2
0
 compile:  function compile(str, path) {
   return stylus(str).use(nib()).set('warn', true)
 }
Example #3
0
  output: {
    path: path.join(__dirname, 'dist/js'),
    publicPath: 'http://localhost:4671/js',
    filename: '[name].js'
  },
  plugins: [
    new webpack.DefinePlugin({
          'process.env.NODE_ENV': '"development"'
      }),
    new webpack.NoErrorsPlugin(),
    new CommonsChunkPlugin("common.js")
  ],
  module: {
    loaders: [
      { test: /\.jade$/, loader: "jade" },
      { test: /\.(js|jsx)$/, loaders: ['react-hot', 'jsx-loader?harmony'] },
      { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' },
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      }
    ]
  },
  stylus: {
    use: [nib()]
  }
};
Example #4
0
gulp.task('styles', function () {
  gulp.src(config.styles.src)
    .pipe(stylus({use: [nib()]}))
    .pipe(gulp.dest(config.styles.dest));
});
Example #5
0
module.exports = function(config) {
// tutorial.js?hash
// tutorial.hash.js
  function extHash(name, ext, hash) {
    if (!hash) hash = '[hash]';
    return config.assetVersioning == 'query' ? `${name}.${ext}?${hash}` :
      config.assetVersioning == 'file' ? `${name}.${hash}.${ext}` :
        `${name}.${ext}`;
  }

  var modulesDirectories = ['node_modules'];
  if (process.env.NODE_PATH) {
    modulesDirectories = modulesDirectories.concat(process.env.NODE_PATH.split(/[:;]/).map(p => path.resolve(p)));
  }

  var webpackConfig = {
    output: {
      // fs path
      path:       path.join(config.publicRoot, 'pack'),
      // path as js sees it
      // if I use another domain here, need enable Allow-Access-.. header there
      // and add  to scripts, to let error handler track errors
      publicPath: '/pack/',
      // в dev-режиме файлы будут вида [name].js, но обращения - через [name].js?[hash], т.е. версия учтена
      // в prod-режиме не можем ?, т.к. CDN его обрезают, поэтому [hash] в имени
      //  (какой-то [hash] здесь необходим, иначе к chunk'ам типа 3.js, которые генерируются require.ensure,
      //  будет обращение без хэша при загрузке внутри сборки. при изменении - барузерный кеш их не подхватит)
      filename:   extHash("[name]", 'js'),

      chunkFilename: extHash("[name]-[id]", 'js'),
      library:       '[name]',
      pathInfo:      process.env.NODE_ENV == 'development'
    },

    cache: process.env.NODE_ENV == 'development',

    watchOptions: {
      aggregateTimeout: 10
    },

    watch: process.env.NODE_ENV == 'development',

    devtool: process.env.NODE_ENV == 'development' ? "cheap-inline-module-source-map" : // try "eval" ?
               process.env.NODE_ENV == 'production' ? 'source-map' : null,

    profile: true,

    entry: {
      styles:                    config.tmpRoot + '/styles.styl',
      about:                     'about/client',
      //markit: 'markit/basicParser',
      auth:                      'auth/client',
      markup:                    'markup/client',
      angular:                   'client/angular',
      head:                      'client/head',
      tutorial:                  'tutorial/client',
      profile:                   'profile/client',
      search:                    'search/client',
      quiz:                      'quiz/client',
      ebook:                     'ebook/client',
      donate:                    'donate/client',
      coursesCourse:             'courses/client/course',
      coursesSignup:             'courses/client/signup',
      coursesParticipantDetails: 'courses/client/participantDetails',
      coursesMaterials:          'courses/client/materials',
      coursesFeedbackEdit:       'courses/client/feedbackEdit',
      coursesFeedbackList:       'courses/client/feedbackList',
      coursesFeedbackShow:       'courses/client/feedbackShow',
      coursesFrontpage:          'courses/client/frontpage',
      newsletterAdmin:           'newsletter/client/admin',
      profileGuestAboutMe:       'profileGuest/client/aboutMe',
      footer:                    'client/footer',
      screencast:                'screencast/client',
      qa:                        'qa/client'
    },

    externals: {
      // require("angular") is external and available
      // on the global var angular
      angular: "angular"
    },

    module: {
      loaders: [
        {
          test:   /\.json$/,
          loader: 'json'
        },
        {
          test:   /\.yml$/,
          loader: 'json!yaml'
        },
        {
          test:   /\.jade$/,
          loader: "jade?root=" + config.projectRoot + '/templates'
        },
        {
          test:    /\.js$/,
          // babel shouldn't process modules which contain ws/browser.js,
          // which must not be run in strict mode (global becomes undefined)
          // babel would make all modules strict!
          exclude: /node_modules\/(angular|prismjs|moment|blueimp-canvas-to-blob|codemirror|markdown-it)/,
          loaders: ['ng-annotate', 'babel?presets[]=es2015,plugins[]=transform-es2015-modules-commonjs'] // babel will work first
        },
        {
          test:   /\.styl$/,
          // ExtractTextPlugin breaks HMR for CSS
          loader: ExtractTextPlugin.extract('style', 'css!autoprefixer?browsers=last 2 version!hover!stylus?linenos=true&resolve url=true')
          //loader: 'style!css!autoprefixer?browsers=last 2 version!stylus?linenos=true'
        },
        {
          test:   /\.(png|jpg|gif|woff|eot|otf|ttf|svg)$/,
          loader: extHash('file?name=[path][name]', '[ext]')
        }
      ],
      noParse: [
        // regexp gets full path with loader like
        // '/js/javascript-nodejs/node_modules/client/angular.js'
        // or even
        // '/js/javascript-nodejs/node_modules/6to5-loader/index.js?modules=commonInterop!/js/javascript-nodejs/node_modules/client/head/index.js'
        {
          test: function(path) {
            /*
             if (path.indexOf('!') != -1) {
             path = path.slice(path.lastIndexOf('!') + 1);
             }
             */
            //console.log(path);
            return noProcessModulesRegExp.test(path);
          }
        }
      ]
    },

    stylus: {
      use: [
        rupture(),
        nib(),
        function(style) {
          style.define('lang', config.lang);
        }]
    },

    resolve: {
      // allow require('styles') which looks for styles/index.styl
      extensions: ['.js', '', '.styl'],
      alias:      {
        config:          'client/config',
        angular:         'angular/angular',
        angularRouter:   'angular-ui-router/release/angular-ui-router',
        angularCookies:  'angular-cookies/angular-cookies',
        angularResource: 'angular-resource/angular-resource'
      },
                  modulesDirectories
    },

    resolveLoader: {
                       modulesDirectories,
      moduleTemplates: ['*-loader', ''],
      extensions:      ['.js', '']
    },

    node: {
      fs: 'empty'
    },

    plugins: [
      new webpack.DefinePlugin({
        LANG:      JSON.stringify(config.lang),
        IS_CLIENT: true
      }),

      // lodash is loaded when free variable _ occurs in the code
      new webpack.ProvidePlugin({
        _: 'lodash'
      }),

      // prevent autorequire all moment locales
      // https://github.com/webpack/webpack/issues/198
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

      // any common chunks from entries go to head
      new CommonsChunkPlugin("head", extHash("head", 'js')),
      new WriteVersionsPlugin(path.join(config.manifestRoot, "pack.versions.json")),

      new ExtractTextPlugin(extHash('[name]', 'css', '[contenthash]'), {allChunks: true}),

      function() {
        // create config.tmpRoot/styles.styl with common styles & styles from handlers
        let content = `
          @require '~styles/common.styl'

          @require '~styles/${config.lang}.styl'
        `;

        config.handlers.forEach(handler => {
          if (fs.existsSync(`${config.projectRoot}/handlers/${handler}/client/styles/global/common.styl`)) {
            content += `\n@require '~${handler}/client/styles/global/common.styl'`;
          }

          if (fs.existsSync(`${config.projectRoot}/handlers/${handler}/client/styles/global/${config.lang}.styl`)) {
            content += `\n@require('~${handler}/client/styles/global/${config.lang}.styl'`;
          }
        });

        fs.writeFileSync(`${config.tmpRoot}/styles.styl`, content);
      },

      {
        apply: function(compiler) {
          compiler.plugin("done", function(stats) {
            stats = stats.toJson();
            fs.writeFileSync(`${config.tmpRoot}/stats.json`, JSON.stringify(stats));
          });
        }
      }
    ],

    recordsPath: path.join(config.tmpRoot, 'webpack.json'),
    devServer:   {
      port:               3001, // dev server itself does not use it, but outer tasks do
      historyApiFallback: true,
      hot:                true,
      watchDelay:         10,
      //noInfo: true,
      publicPath:         process.env.STATIC_HOST + ':3001/pack/',
      contentBase:        config.publicRoot
    }
  };


//if (process.env.NODE_ENV != 'development') { // production, ebook
  if (process.env.NODE_ENV == 'production') { // production, ebook
    webpackConfig.plugins.push(
      function clearBeforeRun() {
        function clear(compiler, callback) {
          del.sync(this.options.output.path + '/*');
          callback();
        }

        // in watch mode this will clear between partial rebuilds
        // thus removing unchanged files
        // => use this plugin only in normal run
        this.plugin('run', clear);
      },

      /* jshint -W106 */
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          // don't show unreachable variables etc
          warnings:     false,
          drop_console: true,
          unsafe:       true,
          screw_ie8:    true
        },
        beautify: true,
        output:   {
          indent_level: 0 // for error reporting, to see which line actually has the problem
          // source maps actually didn't work in Qbaka that's why I put it here
        }
      })
    );
  }

  return webpackConfig;
};
Example #6
0
 compile: function(str, p) {
   return stylus(str).set("filename", p).use(nib());
 }
     'bezier-easing',
     'reflux',
     'debounce',
     'immutable'
   ]
 },
 output: {
   path: path.join(__dirname, 'build'),
   filename: jsName,
   publicPath: '/build/'
 },
 resolve: {
   extensions: ['', '.js']
 },
 stylus: {
   use: [nib(), jeet()]
 },
 bail: process.env.NODE_ENV === 'production',
 module: {
   loaders: [
     {
       test: /\.yml$/,
       loaders: ['json', 'yaml'],
     },
     {
       test: /\.json$/,
       loader: 'json'
     },
     {
       test: /\.styl$/,
       loaders: [
Example #8
0
File: app.js Project: strathausen/t
var compile = function stylusCompile (str, path) {
  return stylus(str).set('filename', path).set('compress', true)
                    .use(nib()).import('nib')
}
        loader: 'url-loader'
      },
      {
        test: /\.styl$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "stylus-loader",
        }]
      }
    ]
  },

  plugins: [
    new webpack.LoaderOptionsPlugin({
      test: /\.styl$/,
      options: {
        stylus: {
          use: [nib(), jeet(), rupture()]
        }
      }
    }),

    new HtmlWebpackPlugin({
      title: 'pj',
      template: 'src/index.pug'
    })
  ]
};
Example #10
0
gulp.task('stylus', function () {
  gulp.src('./assets/stylus/main.styl')
    .pipe(stylus({use: [nib()]}))
    .pipe(gulp.dest('./assets/css/'));
});
Example #11
0
gulp.task('styles', function () {
  gulp.src('stylus/index.styl')
      .pipe(stylus({use: [nib()]}))
      .pipe(gulp.dest('static/css/'))
})
Example #12
0
  this.generate = function (api, app, config) {
    var logger = api.logging.get('build-html');

    var css = this._css.join('\n');
    var js = this._js.join(';');
    var stylusRenderer = stylus(css)
          .set('compress', config.compress)
          .use(nib());
    var jsCompiler = new JSCompiler(api, app);
    var renderCSS = Promise.promisify(stylusRenderer.render, stylusRenderer);
    var compileJS = Promise.promisify(jsCompiler.compress, jsCompiler);

    // browser splash
    var splashImage = config.browser.splash
                   && path.resolve(app.paths.root, config.browser.splash);

    // Create HTML document.
    var html = [];

    return Promise.all([
        renderCSS(),
        config.compress
          ? compileJS('[bootstrap]', js, {showWarnings: false})
          : js,
        splashImage && fs.existsAsync(splashImage) || false,
        config.browser.hasApplicationCache && fs.readFileAsync(getStaticFilePath('app-cache-events.js'), 'utf8'),
        require('../targets/browser/orientation').addOrientationHTML(app, config)
      ])
      .bind(this)
      .spread(function (css, js, splashExists, appCacheEvents) {
        if (!splashExists && !config.isSimulated) {
          var splashPaths = {
            'portrait': ['portrait2048', 'portrait1136',
                          'portrait1024', 'portrait960', 'portrait480'],
            'landscape': ['landscape1536', 'landscape768']
          };

          // get list of splash images to test
          var splashes = [];
          if (app.manifest.supportedOrientations) {
            if (app.manifest.supportedOrientations.portrait) {
              splashes = splashes.concat(splashPaths.portrait);
            }
            if (app.manifest.supportedOrientations.landscape) {
              splashes = splashes.concat(splashPaths.landscape);
            }
          } else {
            splashes = splashes
              .concat(splashPaths.portrait)
              .concat(splashPaths.landscape);
          }
          splashes.push('universal');

          // test if each splash path is in the manifest
          var img;
          for (var i = 0; i < splashes.length; i++) {
            img = app.manifest.splash && app.manifest.splash[splashes[i]];
            img = img && path.resolve(app.paths.root, img);
            if (img && fs.existsSync(img)) {
              // take first matching image found?
              // TODO: figure out correct logic here
              splashImage = img;
              break;
            }
          }

        }

        // Check if there is a manifest.
        html.push('<!DOCTYPE html>');
        if (!config.browser || !config.browser.hasApplicationCache) {
          html.push('<html>');
        } else {
          html.push('<html manifest="' + config.target + '.manifest">');
          config.browser.footerHTML.push('<script>' + appCacheEvents + '</script>');
        }

        html.push(
          '<head>',
          '<meta charset="UTF-8">',
            config.browser.baseURL
              ? '<base href="' + config.browser.baseURL + '">'
              : '',
          '<title>',
            app.manifest.title,
          '</title>'
        );
        applyOpenGraphMetaProperties(html, config);

        // Targeting mobile browsers requires viewport settings.
        if (config.target === 'browser-mobile' || config.isSimulated) {

          html.push('<meta name="viewport"'
              + ' content="user-scalable=no,width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no"/>');

          // Various iOS mobile settings for installing as a top application.
          html.push('<meta name="apple-mobile-web-app-capable"'
              + ' content="yes"/>');

          if (config.browser.icon && app.manifest.browser && app.manifest.browser.icons) {
            var icon = this._getClosestIcon(logger,
                                            192,
                                            app.paths.root,
                                            app.manifest.browser.icons);
            if (icon) {
              html.push('<link rel="icon" size="192x192"'
                        + ' href="' + icon + '">');
            }
          }

          if (config.browser.appleTouchIcon && app.manifest.ios && app.manifest.ios.icons) {
            var icon = this._getClosestIcon(logger,
                                            TARGET_APPLE_TOUCH_ICON_SIZE,
                                            app.paths.root,
                                            app.manifest.ios.icons);
            if (icon) {
              html.push('<link rel="apple-touch-icon"'
                        + ' href="' + icon + '">');
            }
          }

          if (config.browser.appleTouchStartupImage && splashImage) {
            html.push('<link rel="apple-touch-startup-image"'
                      + ' href="' + getBase64Image(splashImage) + '">');
          }
        }

        // Finish writing HTML file.
        html.push(
          '<style>' + css + '</style>',
          config.browser.headHTML.join('\n') || '',
          '</head>',
          '<body>',
          config.browser.bodyHTML.join('\n') || ''
        );

        if (config.browser.embedSplash && splashImage) {
          return getSplashHTML(config, splashImage);
        }
      })
      .then(function (splashHTML) {
        if (splashHTML) {
          html.push(splashHTML);
        }

        html.push(
          '</body>',
          '<script>', js, '</script>',

          // load after config object
          config.browser.footerHTML.join('\n') || '',
          '<script>',
          // 'IMG_CACHE=' + JSON.stringify(imgCache) + ';',

          // fix old android sizing bugs
          'window.addEventListener("load", function(event) {',
            'var ua = navigator.userAgent;',
            'if(/Kik/.test(ua) && /Android/.test(ua)) {',
            'var el = document.getElementById("_GCSplash");',
            'var w = window.innerWidth;',
            'el.style.width = w + "px";',
            'var h = window.innerHeight;',
            'el.style.height = h + "px";',
          '}}, false);',
          '</script>',
          '</html>'
        );

        return html.join('');
      });
  };
Example #13
0
 watch({glob: "src/**/*.styl"}, function(files) {
     return files
         .pipe(stylus({use: [nib()]}))
         .pipe(stylemod())
         .pipe(gulp.dest("./src"));
 });
Example #14
0
function compile(str, path) {
  return stylus(str)
  .set('translation', path)
  .use(nib())
}
Example #15
0
 return function(style){
   style.include(__dirname + '/../styl/');
   style.use(nib());
 };
Example #16
0
gulp.task('stylus-editors', function() {
    gulp.src(paths.src.editors.stylus)
        .pipe(changed(paths.dst.debug.stylus))
        .pipe(stylus({use: [nib()], errors: true}))
        .pipe(gulp.dest(paths.dst.debug.stylus));
});
gulp.task('stylus', function () {
  return gulp.src(PATHS.stylusEntry)
    .pipe(stylus({use: [nib()]}))
    .on('error', errorHandler)
    .pipe(gulp.dest(PATHS.cssDir));
});
Example #18
0
gulp.task('release', function() {
    gulp.src(paths.src.main.stylus)
        .pipe(changed(paths.dst.release.stylus))
        .pipe(stylus({use: [nib()], errors: true}))
        .pipe(gulp.dest(paths.dst.release.stylus));
});
Example #19
0
gulp.task('stylus', function(){
	gulp.src('./stylus/main.styl')
		.pipe(stylus({use: [nib()]}))
		.pipe(gulp.dest('./css/'))
		.pipe(connect.reload());
});
Example #20
0
function compile(str, path) {
  return stylus(str)
    .set('filename', __dirname + '/public')
    .set('compress', false)
    .use(nib());
}
Example #21
0
var compile = function (str, path) {
  return stylus(str)
    .set('filename', path)
    .set('compress', true)
    .use(nib());
};
Example #22
0
gulp.task('css', ['clean'], function() {
  return gulp.src(['src/css/**/*.styl'])
    .pipe(stylus({use: [nib()]}))
    .pipe(gulp.dest('dist/css'))
});
Example #23
0
 compile: function(str, path) {
   console.log('compiling css');
   return stylus(str)
     .set('filename', path)
     .use(nib());
 }
Example #24
0
Mincer.StylusEngine.registerConfigurator(function (style) {
  style.use(nib());
  style.define('import-dir', require('./mincer/stylus/import-dir'));
});
Example #25
0
gulp.task('css', function() {
	gulp.src('./public/stylus/main.styl')
	.pipe(stylus({ use: nib() }))
	.pipe(gulp.dest('./public/css'))
	.pipe(connect.reload());
});
Example #26
0
var templates_module_name = 'myapp';
// For convenience
var paths = {
    dev_target: 'dev_target',
    prod_target: 'target',
    server_main: ['server.js'],
    bower_config: ['bower.json'],
    bower_files: 'bower_components',
    ng_templates: 'app/**/*.html',
    img_src: 'assets/images',
    html_src: 'dev_target/assets/html',
    dev_src: ['app/**/*.*', 'assets/**/*.*', 'index.html', 'index.jade']
};
// plugins that stylus uses
var stylus_libs = [
    nib(), // nib is like compass for sass
    jeet() // jeet is an amazing responsive grid framework
];

// Lint all the dev javascript
gulp.task('lint', function() {
    return gulp.src(paths.dev_src)
        .pipe(plugins.filter('**/*.js'))
        .pipe(plugins.jshint())
        .pipe(plugins.jshint.reporter('default'))
        .pipe(plugins.jshint.reporter('fail'));
});

// Pull down bower dependencies
gulp.task('pull_vendor_deps', function () {
    return bower.commands.install();
Example #27
0
gulp.task('stylus', function () {
    gulp.src('./stylus/master.styl')
        .pipe(stylus({use: [jeet(), rupture(), nib()]}))
        .pipe(gulp.dest('./public/css/'));
});
Example #28
0
	compile: function(str, path) {
		return stylus(str)
			.set('filename', path)
			.use(nib())
			.import('nib');
	}
Example #29
0
 function compile (str, path) {
   return stylus(str)
     .set('filename', path)
     .use(nib());
 };
Example #30
0
gulp.task('css', function() {
  return gulp.src(paths.css)
    .pipe(stylus({use: [nib()]}))
    .pipe(gulp.dest(paths.dest + '/css'));
});