gulp.task('build-css-production', function ()
{
    return gulp.src(scssBuildPath + '/*.scss')
        .pipe(sass({
            outputStyle: 'compressed'
        }).on('error', sass.logError))
        .pipe(autoprefixer(browserList))
        .pipe(gulp.dest(cssBuildPath))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(cssBuildPath))
});
      .flatMap(function(newPackageJson) {

        // TODO do we need to pollute the global namespace?
        global.newPackageJson = newPackageJson;

        var version = {};
        version.old = oldPackageJson.version;
        version.new = newPackageJson.version;
        console.log('files bumping from ' + version.old + ' to ' + version.new);

        function replaceVersionedName() {
          return replace({
            regex: oldPackageJson.name + '-\\d+\\.\\d+\\.\\d+',
            replace: oldPackageJson.name + '-' + version.new
          });
        }

        function replaceVersionedPath() {
          return replace({
            regex: oldPackageJson.name + '\\/\\d+\\.\\d+\\.\\d+',
            replace: oldPackageJson.name + '/' + version.new
          });
        }

        // TODO how can we use a dest that just matches where
        // the file was found?
        return highland(gulp.src([
          'README.md'
        ])
        .pipe(replaceVersionedName())
        .pipe(gulp.dest('./'))
        )
        .concat(
          gulp.src([
            './test/*.html'
          ])
          .pipe(replaceVersionedName())
          .pipe(gulp.dest('./test/'))
        )
        .concat(
          gulp.src([
            './demo/*.html'
          ])
          .pipe(replaceVersionedPath())
          .pipe(replaceVersionedName())
          .pipe(gulp.dest('./demo/'))
        )
        .concat(
          // gulp-bump does not update the dist file name
          gulp.src(metadataFilePaths)
          .pipe(replaceVersionedName())
          .pipe(gulp.dest('./'))
        );
      })
gulp.task('build-css-development', function ()
{
    return gulp.src(scssBuildPath + '/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({
            outputStyle: 'nested',
            sourceComments: true
        }).on('error', sass.logError))
        .pipe(autoprefixer(browserList))
        .pipe(gulp.dest(cssBuildPath))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(cssBuildPath))
});
Exemple #4
0
gulp.task( 'scripts' , function() {

	//output source folder configuration
	$.util.log('JS source folder: ', $.util.colors.magenta(themeJS));

	//Load all of our JS files from the source folder
	return gulp.src([ themeJS + '/libs/*.js', themeJS + '/modules/*.js', themeJS + '/theme.js' ])

	//Like other tasks, set up plumber to catch errors and feed them to notifier's error handler
	.pipe( $.plumber({errorHandler: $.notify.onError(function (error) { return "JavaScript error: " + error; })}))

	//Pipe the JS through the jshint plugin
	//.pipe( $.jshint())
	//Any findings by jshint end up in the stream, the default jshint reporter will format the findings and output
	//them to the console - there are other formatters you can use too by changing out the 'default' below
	//e.g. https://github.com/sindresorhus/jshint-stylish
	//.pipe( $.jshint.reporter('default'))
	//Concatenate our source files into one source js, this will be included
	//by out theme in development environments for easier debugging
	.pipe( $.concat( 'theme.src.js' ))

	//add our header to make sure the files are clearly identifiable as generated files
	.pipe( $.header(header+'\r\n') )

	//and write to disk
	.pipe( gulp.dest( themeOutJS ))

	//continue to uglify for production use
	//stripdebug will pull out any console.log, console.dir directives you may have left in by accident
	.pipe( $.stripDebug() )

	//uglify the JS, which just compresses it down to its smallest representation.
	.pipe( $.uglify() )

	//write our debugless and ugly JS out to the production JS file. Again, it's best to let you app
	//decide which one to use
	.pipe( $.rename( 'theme.min.js' ) )

	//compress it using gzip
	.pipe( $.gzip() )

	//out to disk you go
	.pipe( gulp.dest( themeOutJS ))

	//an incomplete example of using the if module. When I work out a condition that returns true if there has been
	//no errors in the stream (to replace the "true" statement), this will only fire when succesfuly (dreams)
	.pipe( $.if( true ,$.notify({ title: 'JS Compiled' , message: 'JS files have been compiled successfully.' })));

	//reloaderate
	sync.reload();
});
Exemple #5
0
gulp.task('scripts', function() {
    // Minify and copy all JavaScript (except vendor script)
	return gulp.src(src_files)
        .pipe(concat(output_file).on('error', gutil.log))
        .pipe(uglify().on('error', gutil.log))
        .pipe(gulp.dest(output_path));
});
gulp.task('build-js-production', function ()
{
    return gulp.src(javascriptFiles)
        .pipe(uglify())
        .pipe(concat('final.min.js'))
        .pipe(gulp.dest(jsBuildPath));
});
            }, function(res){
                gulp.src("./gulpconfig.json")
                    .pipe(jeditor(function(json) {
                        json.pname = res.pname;
                        json.path_tpl = './bitrix/templates/'+json.pname;

                        json.path_css = json.path_tpl+'/template_styles.css';
                        json.path_js  = json.path_tpl+'/script.js';

                        json.bower_ran = true;
                        require('fs')
                            .writeFileSync(
                                './src/jade/includes/scripts.jade',
                                'script(src=\''+json.path_js.substr(1)+'\')'
                            );
                        require('fs')
                            .writeFileSync(
                                './src/jade/includes/styles.jade',
                                'link(rel=\'stylesheet\', href=\''+json.path_css.substr(1)+'\')'
                            );
                        return json; // must return JSON object.
                    }))
                    .pipe(gulp.dest("."))
                 ;

            })
gulp.task('create-demos-from-tests', function(done) {

  mkdirp.sync(path.join(__dirname, '..', '..', 'demo'));
  mkdirp.sync(path.join(__dirname, '..', '..', 'test', 'browser-tests'));

  // Reading it here (instead of using require) because the
  // version may have been bumped since require was called.
  var packageJson = JSON.parse(fs.readFileSync(
      'package.json', 'utf8'));

  return gulp.src([path.join('test', 'index.html'),
                            path.join('test', 'browser-tests', '**')],
                   {base: 'test'})
    .pipe(replace({
      // TODO Could make this better to avoid unintended changes.
      // Maybe something like this (but need to test that it works
      // with the gulp-regex-replace plugin - it might require an
      // extra backslash to make the backslashes work):
      /*
      regex: '/(' + packageJson.name + '[\.-\/].*)(\.min\.js)|(\.js)/', // jshint ignore:line
      replace: '$1.min.js'
      //*/
      regex: '\.js', // jshint ignore:line
      replace: '.min.js'
    }))
    .pipe(replace({
      // NOTE keep the forward slashes, because this is for
      // URLs, not local filepaths.
      regex: packageJson.name + '\/dev\/',
      replace: packageJson.name + '/' + packageJson.version + '/'
    }))
		.pipe(gulp.dest('demo'));
});
gulp.task('build-js-development', function ()
{
    return gulp.src(javascriptFiles)
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(concat('final.js'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(jsBuildPath));
});
Exemple #10
0
 gulp.task('imagemin', function() {
     return gulp.src(sImgUrl + '/*')
         .pipe(imagemin({
             progressive: true,
             svgoPlugins: [{ removeViewBox: false }],
             use: [pngquant()]
         }))
         .pipe(gulp.dest(sImgUrl));
 });
Exemple #11
0
gulp.task(`minify:styles`, () =>
  gulp.src(`app/css/**/*.css`)
    .pipe(rename((originalPath) => {
      // eslint-disable-next-line no-param-reassign
      originalPath.basename += `.min`;
    }))
    .pipe(cleancss())
    .pipe(gulp.dest(stylesDestDirectory))
    .pipe(browserSync.stream())
Exemple #12
0
gulp.task(`styles`, [`clean:styles`], () =>
  gulp.src(`scss/**/*.scss`)
    .pipe(sourcemaps.init())
      .pipe(sass({
        importer: nodeSassMagicImporter(),
      }).on(`error`, sass.logError))
      .pipe(autoprefixer())
    .pipe(sourcemaps.write({ sourceRoot: `/scss` }))
    .pipe(gulp.dest(stylesDestDirectory))
    .pipe(browserSync.stream())
    .pipe(highland.pipeline(function(stream) {
      if (global.isWatching) {
        return stream;
      }

      return stream
        // These steps are only enabled when
        // a watch is not set.
        // They are too slow to enable
        // during development.
        .through(buffer())
        .through(rename(function(path) {
          path.extname = '.min.js';
        }))
        .through(sourcemaps.init({loadMaps: true}))
        // Add transformation tasks to the pipeline here.
        .through(uglify())
        .through(sourcemaps.write('./'))
        .through(gulp.dest('dist/' + packageJson.version + '/'))
        .through(gulp.dest('demo/lib/' + packageJson.name + '/' + packageJson.version + '/'));
    }))
Exemple #14
0
gulp.task( 'images', function() {
	//we create two filters here. filters in gulp are really useful for applying
	//different plugins/actions in a stream to different content without running seperate tasks,
	//and potentially duplicating effort and bloating your code.
	//theoretically all of the tasks in the file could be done in a single stream using filters,
	//but it's nice to be able to run things seperately, especially when you are watching directories.
	//you want to cut down your run time as much as possible and focus on processing what would have changed.

	//our first filter here is filters out image file types handled by the gulp-imagemin plugin (https://www.npmjs.org/package/gulp-imagemin)
	var imgFilter = $.filter('**/*.{png,gif,jpg,jpeg}'),
			//our second filter filters svg files, as we need to use a different plugin for optimising svg files
	    svgFilter = $.filter('**/*.svg');

	//grab all of our images and throw them down the stream
	return gulp.src( themeImg + '/**/*' )

	//using plumber and the notify error handler here to catch errors, like previous tasks
	.pipe( $.plumber({errorHandler: $.notify.onError(function (error) { return "Image optimisation error: " + error; })}))

	//here we apply the the image filter - which temporarily removes anything from the stream that does not match the filter
	.pipe( imgFilter )

	//we enable progressive encoding and interlacing in our images
	.pipe( $.imagemin({progressive: true, interlaced: true}) )

	//now we restore everything that was filtered out previously, bringing them back into the stream
	.pipe( imgFilter.restore() )

	//and then filter out everything but svg files
	.pipe( svgFilter )

	//run the gulp-svgmin plugin (https://www.npmjs.org/package/gulp-svgmin)
	.pipe( $.svgmin() )

	//restore everything that was filtered out (non-svg files)
	.pipe( svgFilter.restore() )

	//now we write everything out to disk. this will include everything that was picked up with gulp.src. For
	//files that matched one of our filters, the files will have been optimised. Everything else will
	//just come through as-is. In this example, we have filter coverage for all of the file types we are
	//loading with gulp.src, so this explanation is really just for documentation purposes.
	.pipe( gulp.dest( themeOutImg ) )

	//notify that we are done
	.pipe( $.notify({ title: 'Images Optimised', message: 'Image files have been optimised successfully.' }));

	//and reload
	sync.reload();
})
Exemple #15
0
	.on('codepoints', function(codepoints, options) {

	  //Sets the name of the font again, because reaching into the stream and plucking this out of the iconfont
		//likely involves some serious voodoo
		var fontName = 'icons';

		//options for the templating engine (swig!) used to create CSS & HTTML sample files.
		var fontOptions = {

			//in the templte, glyphs will refer to the list of codepoints we've had passed through
			//from gulp-iconfont
			glyphs: codepoints,

			//fontName will refer to... the font name.
			fontName: fontName,

			//fontPath will refer to the relative path, from the CSS files in your OUTPUT directory,
			//to the fonts in your output directory. This can be customised to suit.
			fontPath: '../fonts/',

			//classname is used when generating CSS as a prefix for the CSS. Generated classes referring
			//to individual glyphs will begin with this, and a class specifying font-wide defaults will also
			//be created with this name.
			className: 'icons'
		};

		//This is an example of a gulp stream, within a gulp stream! Gulpception!
		//Load in the SCSS template, to be used when generating font css.
		//We load these from __dirname, as they usually sit in the parent theme directory,
		//and we don't want to copy them around to child themes.
		gulp.src( themeIconTemplates + '*.scss' )

			//Use swig to generate the template
			.pipe( $.consolidate( 'swig', fontOptions ))

			.on('error', $.util.log)

			//Name the output file
			.pipe( $.rename ( '_' + fontName + '.scss' ))

			//Output files
			//This is something pretty cool. We output the generated SCSS template, into our
			//Sass assets directory. This triggers the CSS compilation task below to automatically
			//pick up the new SCSS file, and roll it into our combined CSS file. More Gulpception!
			.pipe( gulp.dest ( themeSass + '/fonts/' ))
    })
Exemple #16
0
module.exports = function compile(filesRoot, filesDest, filesGlob, options) {
    const config = Object.assign({
        typescript: tsc,
    }, options);
    const tsProject = $.typescript.createProject(`tsconfig.json`, config);
    const result = gulp.src([...filesGlob, ...paths.typings.all])
        .pipe($.plumber(plumb))
        .pipe($.sourcemaps.init())
        .pipe($.typescript(tsProject));
    const js = result.js
        .pipe($.sourcemaps.write(`./`, {
            sourceRoot: path.join(__dirname, `..`, `..`, paths.compile.src),
        }));
    const dts = result.dts;
    return merge(js, dts)
        .pipe(gulp.dest(filesDest))
        .pipe($.connect.reload());
};
Exemple #17
0
function buildScripts (params) {
  params            = params        || {};
  var options       = params.buildOptions || {};
  var gulp          = require(options.modulesData['gulp'].uses);
  var dest          = params.dest    || options.tmp + '/serve/app';
  var src           = params.src     || [options.src + '/app/**/*.coffee', options.src + '/app/**/*.js', options.src + '/app/**/*.cjsx'];

  var hasJsLint     = options.modulesData['scripts'].js.lint.active;
  var hasCoffeeLint = options.modulesData['scripts'].coffee.lint.active;

  var hasSourceMaps = options.modulesData['scripts'].coffee.sourcemaps.active;

  var coffeeFilter  = $.filter('**/*.coffee',  { restore: true });
  var jsFilter      = $.filter('**/*.js'    ,  { restore: true });
  var cjsxFilter    = $.filter('**/*.cjsx'  ,  { restore: true });

  return gulp.src(src)

    .pipe(jsFilter)
    .pipe($.if(hasJsLint, $.jshint()))
    .pipe($.if(hasJsLint, $.jshint.reporter('jshint-stylish')))
    .pipe($.sourcemaps.init())
    .pipe($.babel())
    .pipe($.sourcemaps.write('.'))
    .pipe(jsFilter.restore)

    .pipe(coffeeFilter)
    .pipe($.if(hasSourceMaps, $.sourcemaps.init()))
    .pipe($.if(hasCoffeeLint, $.coffeelint()))
    .pipe($.if(hasCoffeeLint, $.coffeelint.reporter()))
    .pipe($.coffee()).on('error', options.errorHandler('CoffeeScript'))
    .pipe($.if(hasSourceMaps, $.sourcemaps.write()))
    .pipe(coffeeFilter.restore)

    .pipe(cjsxFilter)
    .pipe(cjsx({bare: true}).on('error', options.errorHandler('CoffeeScriptX')))
    .pipe(cjsxFilter.restore)

    .pipe(gulp.dest(dest))
    .pipe(browserSync.stream({ match: '**/*.js' }))
    .pipe($.size());

}
Exemple #18
0
gulp.task('imgmin', function() {
    var jpgmin = imageminJpegRecompress({
            accurate: true, //高精度模式
            quality: "high", //图像质量:low, medium, high and veryhigh;
            method: "smallfry", //网格优化:mpe, ssim, ms-ssim and smallfry;
            min: 70, //最低质量
            loops: 0, //循环尝试次数, 默认为6;
            progressive: false, //基线优化
            subsample: "default" //子采样:default, disable;
        }),
        pngmin = imageminOptipng({
            optimizationLevel: 4
        });
    gulp.src(WDO.pathImg + '/*')
        .pipe(imagemin({
            use: [jpgmin, pngmin]
        }))
        .pipe(gulp.dest(WDO.pathImg));
});
  var bundle = function() {
    // Log when bundling starts
    bundleLogger.start();

    return bundler
    .bundle()
    // Report compile errors
    .on('error', handleErrors)
    // Use vinyl-source-stream to make the
    // stream gulp compatible. Specify the
    // desired output filename here.
    .pipe(source(getBundleName() + '.js'))
    .pipe(highland.pipeline(function(stream) {
      if (global.isWatching) {
        return stream;
      }

      return stream
        // These steps are only enabled when
        // a watch is not set.
        // They are too slow to enable
        // during development.
        .through(buffer())
        .through(rename(function(path) {
          path.extname = '.min.js';
        }))
        .through(sourcemaps.init({loadMaps: true}))
        // Add transformation tasks to the pipeline here.
        .through(uglify())
        .through(sourcemaps.write('./'))
        .through(gulp.dest('dist/' + packageJson.version + '/'))
        .through(gulp.dest('demo/lib/' + packageJson.name + '/' + packageJson.version + '/'));
    }))
    // Specify the output destination
    .pipe(gulp.dest('test/lib/' + packageJson.name + '/dev/'))
    // Log when bundling completes!
    .on('end', bundleLogger.end);
  };
Exemple #20
0
 gulp.task('css', function() {
     var processors = [
         autoprefixer({
             browsers: ['last 2 version'],
             cascade: false,
             remove: false
         })
         // ,
         //require("autorem")({
         //legacy: true,
         //baseFontSize: 10
         //}),
         //cssnext(),
         // cssgrace,
         // lost()
     ];

     return gulp.src(sOpt.sUrl + '/*.scss')
         .pipe(sass().on('error', sass.logError))
         .pipe(postcss(processors))
         .pipe(gulp.dest(sSassUrl));
     // 路径设置
     // console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
 });
Exemple #21
0
gulp.task('index', function () {
    gulp.src('index.html')
        .pipe(htmlMin({collapseWhitespace: true}))
        .pipe(gulp.dest('./public'));
});
Exemple #22
0
gulp.task('sass', function () {
    gulp.src('style.scss')
        .pipe(sass())
        .pipe(uglyCss())
        .pipe(gulp.dest('./public'));
});
Exemple #23
0
 gulp.task('clean', function() {
     return gulp.src(sSassUrl + '/' + '.sass-cache')
         .pipe(clean({ force: true }))
         .pipe(gulp.dest(sSassUrl + '/' + 'clean'));
 });
Exemple #24
0
#!/usr/bin/env node

'use strict';

var argv = require('yargs').argv;

var path = require('path'),
	through2 = require('through2'),
	fs = require('vinyl-fs'),
	s3 = require(path.join(__dirname, '..'));

// Streaming upload to S3
// env AWS_PROFILE="home" ./example/upload.js --dest="s3://bucket" "./*.jpg"
fs.src(argv._, { buffer: argv.buffer })
	.pipe(s3.dest(argv.dest))
	.pipe(through2.obj(function processed(file, enc, callback) {
		console.log('Uploaded', file.path);
		callback();
	}))
	.on('finish', function end() {
		console.log('Done.');
	});
Exemple #25
0
 gulp.task('tinypng', function() {
     gulp.src(sImgUrl + '/*.{png,jpg,jpeg}')
         .pipe(tinypng(config.tinypngapi))
         .pipe(gulp.dest(sImgUrl));
 });
Exemple #26
0
gulp.task( 'styles', function() {
	//In this task, we generate development styles, which are easier on they eye of the debugger
	//These are then minified seperately.
	//The correct file should be chosen based on environment, as explained earlier in the file.

	//Log the input folder information
	$.util.log('Sass source folder: ', $.util.colors.magenta(themeSass));

	//Load up all of our Sass SCSS files
	return gulp.src(themeSass + '/theme.scss')

	//Like in previous tasks, we set up plumber and an error handler
	.pipe( $.plumber({errorHandler: $.notify.onError(function (error) { return "Stylesheet error: " + error; })}))

	//Call gulp-ruby-sass
	//Note: We use ruby sass as it allows us to use the proper, offical, sass compiler. (http://sass-lang.com/)
	//No waiting for various compilers to catch up to Sass 3.3 support, for example. /me looks at gulp-sass
	.pipe( $.rubySass({

		//tell ruby-sass to run using the bundled version rather than system version
		bundleExec: true,

		//make compass work
		compass: true,

		//write out full, readable CSS for debugging. We compress it later
		style: 'expanded',

		//use 10 digits when outputing decimal number values. The default is 3, but we're fancy.
		precision: 10,

		//require the following sass plugins/ruby gems. This is why we set bundleExec to true :)
		//this would go very poorly if this wasn't installed prior to running ruby-sass.
		//this can be any gem, but it only makes sense to use sass plugins here.
		//Sass-globbing:
		//is useful as it allows you to use wildcards when specifying imports - e.g. @import 'modules/*'
		//Susy:
		//is a great framework for building mobile-first grid layouts, so let's use it
		//Breakpoint:
		//really nice and simple media query mixins, works will when using Susy for responsive grids
		//Compass:
		//is used by breakpoint, and provides lots of handy sass mixins, such as clearfix
		require: ['sass-globbing','susy','compass','breakpoint']
	}) )
	//Pleeease doesn't make you write out all of those irritating browser vendor prefixes. It does it for you :)
	//Note: It's a really good idea to do this processing, linting and compilation stuff before you concatenate,
	//otherwise it's tricky to work out which file has formatting issues, as you lose the context of
	//which lines belong to which files when concatenating.
	.pipe( $.pleeease() )

	//output what we have so far to theme.src.css. This will be uncompressed and readable. Concat
	//takes all of the various files we've piped into the stream and combines them into a single file.
	.pipe( $.concat('theme.src.css') )

	//Apply our header so it is clear that this file has been generated automatically, and shouldn't be edited.
	.pipe( $.header(header+'\r\n') )

	//And write the file out to disk
	.pipe( gulp.dest(themeOutCSS) )

	//This is why gulp is cool, we can keep working with the file without loading it again
	//We also keep all of the same information we were workign with when we wrote it to disk too
	//Now proceed to compress for production styles
	.pipe( $.minifyCss() )

	//Concat it out to a new file
	.pipe( $.concat('theme.min.css') )

	//Write the compressed file
	.pipe( gulp.dest(themeOutCSS ) )

	//And notify that we're done
	.pipe( $.notify({ title: 'CSS Compiled' , message: 'Sass files have been compiled successfully.' }));

	//Browsersync, do your thing
	sync.reload();
});
Exemple #27
0
gulp.task( 'icons', function() {

	//Log the input folder information
	$.util.log( 'Icon font source folder: ', $.util.colors.magenta( themeIcons));
	$.util.log( 'Icon font template folder: ', $.util.colors.magenta( themeIconTemplates ));

	//Start a stream by priming it with the svg files in our icons directory.
	//the /**/ tells gulp to load *.svg files from the root and subdirectories recursively.
	return gulp.src(themeIcons + '/**/*.svg')

	//Pipe the stream to plumber, which adds error handlers so the stream is not broken should something fail
	//This is important, as breakage of the stream will otherwise terminate the stream. As we are using
	//gulp-watch to watch directories for changes, terminating the stream is a major time waster, as it means we
	//have to manually restart gulp - instead of fixing the problem and having gulp-watch automatically rerun the
	//task when the file changes.
	//We send any errors, including handy error test, to the gulp-notify error handler, which allows the full
	//error to be displayed in the notification area on Linux, OSX and Windows. We do this seperately on each
	//task so that we can specify message text that clearly identifies which task had issues. Otherwise, it is
	//possible to write your own error handler and reuse it on each task's stream.
	.pipe( $.plumber({errorHandler: $.notify.onError(function (error) { return "Icon font error: " + error; })}))

	//Load and run the gulp-iconfont plugin, by using the gulp-load-plugin syntax of $.iconfont
	.pipe( $.iconfont({

		//this gives our font a name. this makes up the filename, but also the namespace in CSS used to identify the font face.
		//we specify this here, and then again in the CSS/HTML generation. Could possible be done another way by pulling the
		//font name out of the stream.
		fontName: 'icons',

		//appending code points is cool - it generates events in the gulp stream that we can use later in the stream, that detail
		//the code points (characters) in the font that each SVG icon will occupy. We take those events and use them to
		//generate CSS and HTML so that each character gets a meaningful name
		appendCodepoints: true,

		//Attempt to fix different sizes icons
		normalize: true
	}))

	//Process the codepoints event mentioned above. .on handlers (event handlers) are for acting upon events.
	//This one will only respond to event/error objects of type 'codepoints',
	//everything else will just pass on by to continue through the gulp stream.
	//different plugins are often capable of generating errors/events on success or failure too.
	.on('codepoints', function(codepoints, options) {

	  //Sets the name of the font again, because reaching into the stream and plucking this out of the iconfont
		//likely involves some serious voodoo
		var fontName = 'icons';

		//options for the templating engine (swig!) used to create CSS & HTTML sample files.
		var fontOptions = {

			//in the templte, glyphs will refer to the list of codepoints we've had passed through
			//from gulp-iconfont
			glyphs: codepoints,

			//fontName will refer to... the font name.
			fontName: fontName,

			//fontPath will refer to the relative path, from the CSS files in your OUTPUT directory,
			//to the fonts in your output directory. This can be customised to suit.
			fontPath: '../fonts/',

			//classname is used when generating CSS as a prefix for the CSS. Generated classes referring
			//to individual glyphs will begin with this, and a class specifying font-wide defaults will also
			//be created with this name.
			className: 'icons'
		};

		//This is an example of a gulp stream, within a gulp stream! Gulpception!
		//Load in the SCSS template, to be used when generating font css.
		//We load these from __dirname, as they usually sit in the parent theme directory,
		//and we don't want to copy them around to child themes.
		gulp.src( themeIconTemplates + '*.scss' )

			//Use swig to generate the template
			.pipe( $.consolidate( 'swig', fontOptions ))

			.on('error', $.util.log)

			//Name the output file
			.pipe( $.rename ( '_' + fontName + '.scss' ))

			//Output files
			//This is something pretty cool. We output the generated SCSS template, into our
			//Sass assets directory. This triggers the CSS compilation task below to automatically
			//pick up the new SCSS file, and roll it into our combined CSS file. More Gulpception!
			.pipe( gulp.dest ( themeSass + '/fonts/' ))
    })
	//Now that we have processed the codepoints, we can write our font to disk
	.pipe( gulp.dest(themeOutFonts) )

	//Notify that the task is complete. TODO: Need to work out how to skip this if there's been an error.
	.pipe( $.notify({ title: 'Icon Font Compiled', message: 'Icon font has been compiled successfully.' }));

   //Ask browsersync nicely to reload ALL THE DEVICES!!!1!!1!
   sync.reload();
});
  getVersionType.each(function(versionType) {
    console.log('versionType');
    console.log(versionType);
    if (versionType === 'none') {
      return callback(null, 'none');
    }

    gulp.src(metadataFilePaths)
    .pipe(bump({type: versionType}))
    .pipe(gulp.dest('./'))
    .pipe(highland.pipeline(function(s) {
      return s.map(function(file) {
        return file.contents;
        // TODO we should be able to use something like this
        // to make this code simpler, but it's not working:
        //return file.pipe(JSONStream.parse('*'));
      })
      .head()
      .pipe(JSONStream.parse())
      // This is needed to turn the stream into a highland stream
      .pipe(highland.pipeline())
      .flatMap(function(newPackageJson) {

        // TODO do we need to pollute the global namespace?
        global.newPackageJson = newPackageJson;

        var version = {};
        version.old = oldPackageJson.version;
        version.new = newPackageJson.version;
        console.log('files bumping from ' + version.old + ' to ' + version.new);

        function replaceVersionedName() {
          return replace({
            regex: oldPackageJson.name + '-\\d+\\.\\d+\\.\\d+',
            replace: oldPackageJson.name + '-' + version.new
          });
        }

        function replaceVersionedPath() {
          return replace({
            regex: oldPackageJson.name + '\\/\\d+\\.\\d+\\.\\d+',
            replace: oldPackageJson.name + '/' + version.new
          });
        }

        // TODO how can we use a dest that just matches where
        // the file was found?
        return highland(gulp.src([
          'README.md'
        ])
        .pipe(replaceVersionedName())
        .pipe(gulp.dest('./'))
        )
        .concat(
          gulp.src([
            './test/*.html'
          ])
          .pipe(replaceVersionedName())
          .pipe(gulp.dest('./test/'))
        )
        .concat(
          gulp.src([
            './demo/*.html'
          ])
          .pipe(replaceVersionedPath())
          .pipe(replaceVersionedName())
          .pipe(gulp.dest('./demo/'))
        )
        .concat(
          // gulp-bump does not update the dist file name
          gulp.src(metadataFilePaths)
          .pipe(replaceVersionedName())
          .pipe(gulp.dest('./'))
        );
      })
      .last()
      .each(function() {
        return callback();
      });
    }));
  });
Exemple #29
0
gulp.task('css', function() {
    var processors = [
        sprites({
            stylesheetPath: WDO.pathCss,
            spritePath: WDO.pathImg,
            basePath: WDO.pathImg + '/icon',
            hooks: {
                onUpdateRule: function(rule, token, image) {
                    if (WDO.isPC) {
                        var backgroundImage = postcss2.decl({
                            prop: 'background-image',
                            value: 'url(' + image.spriteUrl + ')'
                        });

                        var backgroundSize = postcss2.decl({
                            prop: 'background-size',
                            value: Math.ceil(image.spriteWidth / 1) + 'px ' + Math.ceil(image.spriteHeight / 1) + 'px '
                        });

                        var backgroundPosition = postcss2.decl({
                            prop: 'background-position',
                            value: Math.ceil(image.coords.x / 1) + 'px ' + Math.ceil(image.coords.y / 1) + 'px '
                        });

                        var minSpriteWidth = postcss2.decl({
                            prop: 'width',
                            value: Math.ceil(image.coords.width / 1) + 'px'
                        });

                        var minSpriteHeight = postcss2.decl({
                            prop: 'height',
                            value: Math.ceil(image.coords.height / 1) + 'px'
                        });
                    } else {
                        var backgroundImage = postcss2.decl({
                            prop: 'background-image',
                            value: 'url(' + image.spriteUrl + ')'
                        });

                        var backgroundSize = postcss2.decl({
                            prop: 'background-size',
                            value: Math.ceil(image.spriteWidth / 2) + 'px ' + Math.ceil(image.spriteHeight / 2) + 'px '
                        });

                        var backgroundPosition = postcss2.decl({
                            prop: 'background-position',
                            value: Math.ceil(image.coords.x / 2) + 'px ' + Math.ceil(image.coords.y / 2) + 'px '
                        });

                        var minSpriteWidth = postcss2.decl({
                            prop: 'width',
                            value: Math.ceil(image.coords.width / 2) + 'px'
                        });

                        var minSpriteHeight = postcss2.decl({
                            prop: 'height',
                            value: Math.ceil(image.coords.height / 2) + 'px'
                        });
                    }

                    rule.insertAfter(token, backgroundImage);
                    rule.insertAfter(backgroundImage, backgroundPosition);
                    rule.insertAfter(backgroundPosition, backgroundSize);
                    rule.insertAfter(minSpriteWidth, minSpriteWidth);
                    rule.insertAfter(minSpriteHeight, minSpriteHeight);
                }
            },
            filterBy: function(image) {
                if (!/\icon/.test(image.url))
                    return Promise.reject();
                return Promise.resolve();
            }
        }),
        autoprefixer({
            browsers: ['> 1%', 'last 2 versions', 'ie 6-11']
        }),
        cssgrace,
        postcssSorting,
        Short,
        cssMqpacker({
            sort: true
        })
        // stylelint()
        // ,
        //require("autorem")({
        //legacy: true,
        //baseFontSize: 10
        //}),
        //cssnext(),
        // lost()
    ];


    return gulp.src(WDO.pathSass + '/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss(processors))
        .pipe(nano({ discardComments: { removeAll: true } }))
        .pipe(postcss([assets({
            loadPaths: [WDO.pathImg],
            baseUrl: WDO.relativePath,
            relative: true,
            // cachebuster: true

        })]))
        .pipe(gulp.dest(WDO.DIYPath));
});
Exemple #30
0
gulp.task('clean', function() {
    return gulp.src(WDO.url + '/' + '.sass-cache')
        .pipe(clean({ force: true }))
        .pipe(gulp.dest(WDO.morPath + '/' + 'clean'));
});