Exemple #1
0
gulp.task('stylus', function () {
  //grabs the plugins from the config file
  // var stylusPlugins = config.tasks.css.stylus.plugins.map(function (plugin) {
  //   var _plugin = require(plugin);
  //   if (_plugin) {
  //     return _plugin();
  //   }
  //   console.warn('Stylus Plugin Error: ' + plugin + 'not found make sure it is installed via npm.');
  // });
  // console.log(stylusPlugins)
  return gulp.src(paths.src)
    //filter out partials (folders and files starting with "_" )
    .pipe(filter(function (file) {
      if (config.tasks.css.filterPartials) {
        if (!/\/_/.test(file.path) || !/^_/.test(file.relative)) {
          return file;
        }
      }else {
        return file;
      }
    }))
    //Only complie changes
    .pipe(changed(paths.postDest, {
      extension: '.css',
      hasChanged: compareLastModifiedTime
    }))
    .pipe(stylus({
      use: [ctr(), typographic()],
      'include css': true
    }))
    .on('error', handleErrors)
    .pipe(gulp.dest(paths.postDest));
});
Exemple #2
0
    gulp.task('stylus', function(){
        return gulp.src( paths.dev.css, {
            'views'    : './app/views/',
            'partials' : './app/partials/'
        })
            .pipe( plumber() )
            .pipe( stylus({

            paths: [
                'node_modules',
                paths.dev.css[0],
                paths.dev.css[1]
            ],

            import: [
                'jeet/stylus/jeet',
                'nib',
                'rupture/rupture',
            ],

            use: [
                nib(),
                typographic(),
                rupture(),
                jeet()
            ],

            'include css': true

        }))
        .pipe( autoprefixer() )
        .pipe( gulpif( config.env === 'prod', cssmin() ) )
        .pipe( gulpif( config.env === 'prod', concat('production.min.css'), concat('production.css') ) )
        .pipe( gulp.dest( paths.dist.base ) );
    });
Exemple #3
0
gulp.task('styles', function() {
  return gulp.src(source_files.styles)
      .pipe(ignore('_*.styl'))
      .pipe(debug({title: "styles"}))
      .pipe(plumber())
      .pipe(stylus({
          use: [
            typographic(),
            poststylus(['lost', 'autoprefixer'])
          ]
      }))
      .pipe(minifyCss({compatibility: 'ie8'}))
      .pipe(gulp.dest(dist_folders.styles));
});
Exemple #4
0
gulp.task('compile', function () {
  gulp.src(stylSrc)
    .pipe(stylus({
      use: [
        autoprefixer(),
        axis(),
        jeet(),
        nib(),
        rupture(),
        typographic(),

      ],
      compress: false
    }))
    .pipe(gulp.dest('./public/css/'));
});
Exemple #5
0
gulp.task( 'rucksack', function () {
  var processors = [
    lost(),
    autoprefixer( {
      browsers: [ 'last 3 versions' ]
    } )
  ];

  var stylusOptions = {
    use: [ nib(), rupture(), typographic() ]
  };
  return gulp.src( paths.stylesSource + '*.styl' )
      .pipe( plumber() )
      .pipe( stylus( stylusOptions ) )
      .pipe( rucksack() )
      .pipe( postcss( processors ) )
      .pipe( gulp.dest( paths.stylesDestination ) );
} );
Exemple #6
0
gulp.task( 'styles', function () {
  var processors = [
    lost(),
    autoprefixer( {
      browsers: [ 'last 3 versions' ]
    } )
  ];

  var stylusOptions = {
    use: [ nib(), rupture(), typographic() ]
  };

  return gulp.src( paths.stylesSource + '*.styl' )
      .pipe( sourcemaps.init() )
      .pipe( plumber() )
      .pipe( stylus( stylusOptions ) )
      .pipe( postcss( processors ) )
      .pipe( sourcemaps.write( './' ) )
      .pipe( gulp.dest( paths.stylesDestination ) )
      .pipe( connect.reload() );

} );
const entry = 'src/index.styl'
const outfile = 'release/index.css'
const stylusPaths = [`${__dirname}/src`]

const isProduction = process.env.NODE_ENV === 'production'

const data = readFileSync(entry, 'utf8')
const options = {
  filename: entry,
  compress: isProduction,
  sourcemap: {inline: true}
}

stylus(data, options)
.set('paths', stylusPaths)
.use(autoprefixer())
.use(koutoSwiss())
.use(sanitizeStyl())
.use(typographic())
.use(rupture())
.use(jeet())
.render((error, css) => {
  if (error) {
    throw error
  }

  mkdirp(dirname(outfile))
  writeFileSync(outfile, css)
  console.log(`rendered ${outfile}`)
})
Exemple #8
0
  return new Promise((resolve, reject) => {

    var config = {
      target: 'web',
      entry: {
        main: [
          'babel-polyfill',
          `${env.SRC}/main.js`
        ]
      },
      resolve: {
        extensions: ['', '.js', '.jsx', '.json']
      },
      output: {
        path: env.DIST,
        filename: 'bundle.js'
      },
      node: {
        fs: 'empty'
      },
      plugins: [
        new webpack.ProvidePlugin({
          fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch'
        })
      ],
      module: {
        loaders: [
          {
            test: /\.jsx?$/,
            include: env.SRC,
            loader: 'babel',
            query: {

              "env": {
                "development": {
                  "plugins": [
                    ["react-transform", {
                      "transforms": [
                        {
                          "transform": "react-transform-hmr",
                          "imports": ["react"],
                          "locals": ["module"]
                        },
                        {
                          "transform": "react-transform-catch-errors",
                          "imports": ["react", "redbox-react"]
                        }
                      ]
                    }]
                  ]
                }
              }

            }
          },
          {
            test: /\.json$/,
            loader: 'json'
          },
          {
            test: /\.(jpe?g|png|gif|svg|ico)$/i,
            loaders: [
              'file?hash=sha512&digest=hex&name=[hash].[ext]'
            ]
          }
        ]
      },
      // specific packages
      stylus: {
        use: [typographic()],
        import: ['typographic', `${env.SRC}/design/**`],
        errors: true
      },
      postcss: function(){
        return [
          lost({/** https://github.com/corysimmons/lost#global-grid-settings **/
            flexbox: 'flex'
          }),
          pxtorem({/** https://github.com/cuth/postcss-pxtorem#options **/}),
          autoprefixer({/** https://github.com/postcss/autoprefixer-core#usage **/
            // browsers: ['last 2 versions']
          })
        ]
      }
    }

    // clean + copy icon
    emptyDirSync(config.output.path)
    copySync(`${env.SRC}/static/favicon.png`, `${config.output.path}/favicon.png`)

    if (__DEVELOPMENT__) { // = development

      copySync(`${env.SRC}/static/index.dev.html`, `${config.output.path}/index.html`)

      const virtual = {
        host: 'localhost',
        port: 10000
      }

      // define package
      config = merge(config, {
        devtool: 'inline-source-map',
        debug: true,
        entry: {
          main: [
            // -> queryparams enable reload
            `webpack-hot-middleware?path=http://${virtual.host}:${virtual.port}/__webpack_hmr`
          ]
        },
        output: {
          // include port for remote reference
          publicPath: `http://${virtual.host}:${virtual.port}/`
        },
        plugins: [
          new webpack.DefinePlugin({
            __DEVELOPMENT__: true
          }),
          new webpack.HotModuleReplacementPlugin(),
          new webpack.NoErrorsPlugin()
        ],
        module: {
          loaders: [
            {
              test: /\.styl$/,
              loader: [ // loader: 'style!css!postcss!stylus'
                'style',
                'css?module&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
                'postcss',
                'stylus?outputStyle=expanded&sourceMap'
              ].join('!')
            }
            // {
            //   test: /\.css$/,
            //   loader: [
            //     'style',
            //     'css', // no CSS modules used !
            //     'postcss'
            //   ].join('!')
            // }
          ]
        }
      })

      const server = express()
      const compiler = webpack(config)
      // virtual embed !
      server.use(webpackDevMiddleware(compiler, {
        contentBase: `http://${virtual.host}:${virtual.port}`,
        noInfo: true,
        quiet: true,
        hot: true,
        inline: true,
        lazy: false,
        publicPath: config.output.publicPath,
        headers: {
          'Access-Control-Allow-Origin': '*'
        },
        stats: {
          colors: true
        }
      }))
      server.use(webpackHotMiddleware(compiler))
      return server.listen(virtual.port, function (error) {
        if (error) {
          return reject(error)
        }
        console.log(`[HOTLOADER] ${config.output.publicPath}`)
        return resolve()
      })
    }

    copySync(`${env.SRC}/static/index.html`, `${config.output.path}/index.html`)

    // = production
    config = merge(config, {
      devtool: 'source-map',
      debug: false,
      plugins: [
        new webpack.DefinePlugin({
          __DEVELOPMENT__: false,
          'process.env': { // optimize builts
            NODE_ENV: JSON.stringify('production')
          }
        }),
        new ExtractTextPlugin('styles.css', { allChunks: true }),
        new webpack.PrefetchPlugin('react'),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({
          sourceMap: false, // true
          compress: {
            screw_ie8: true,
            warnings: false
          }
        })
      ],
      module: {
        loaders: [
          {
            test: /\.styl$/,
            loader: ExtractTextPlugin.extract('style-loader', [
              'css?module&importLoaders=1',
              'postcss',
              'stylus'
            ].join('!')),
          }
          // {
          //   test: /\.css$/,
          //   loader: ExtractTextPlugin.extract('style-loader', [
          //     'css', // no css modules
          //     'postcss'
          //   ].join('!'))
          // }
        ]
      },
      stylus: {
        compress: true
      }
    })

    webpack(config).run(function (error, stats) { // notify
      if (error) {
        return reject(error)
      }
      console.log('[BUILD] - Client', stats.toString())
      return resolve()
    })

  })