gulp

什么是雪碧图？ 雪碧图也叫CSS精灵， 是一种CSS图像合成技术； 通俗来说： 将小图标合并在一起之后的图片称作雪碧图，每个小图标的使用配合background-position来获取。如下： 如上雪碧图，background-position使用定位如下X和Y轴，注：原点0，0 位置， 之后 X和Y轴均为负值，定位到图片左上侧起点后根据width和height截取小图标 为什么应用雪碧图？ 网站开发90%会用到小图标， 多小图标调用显示是前端开发常见的问题，如果每个小图标都单独调用一张图片， 即意味着每个小图标的显示都产生一个HTTP请求；每个请求都需要一定的性能开销，主要在请求、以及响应阶段。 为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是<image>标签，而是CSS Sprite雪碧图。 什么图片是和拼成雪碧图？ 1. 静态图片，不随用户信息的变化而变化 2. 小图片，图片容量比较小（一些大图不建议拼成雪碧图） 3. 加载量比较大 使用雪碧图的优缺点？ 优点：调用简单、维护方便； 缺点：请求文件过多、引发性能问题； 如何生成雪碧图？ 1. PS手动拼图（图片量少） 2.使用sprite工具自动生成，如css Gaga 雪碧图实现方式： 慕课网雪碧图教程 推荐软件， CssGaga 帮助索引 PS： 该软件只有windows版本，

Angular 2 rc 6 written in Typescript 2.0.2 I'm trying to learn Ahead-of-Time compilation as outlined here . It seems simple enough: Run ngc instead of the Typescript compiler to generate .ngfactory.ts files Replace platformBrowserDynamic().bootstrapModule() with platformBrowser().bootstrapModuleFactory() I'm not sure how to apply the first step to my setup. I use gulp-typescript 2.13.6 to compile my typescript to JavaScript. gulpfile.js var ts = require('gulp-typescript'); var tsProject = ts.createProject('tsconfig.json', { //Use TS version installed by NPM instead of gulp-typescript's built

I'm having a hard time to understand on how to process multiple gulp sources in a single task. In a task like this: gulp.task('task1', function (cb) { gulp.src('src/js/**/*').pipe(gulp.dest('dist')); gulp.src('src/css/**/*').pipe(gulp.dest('dist')); ... }); I would like to process all the different source files and then mark the task as finished, so the others tasks can depend on it's completion. I'm aware of the possibility, to using individual tasks for each individual source but this would make everything more complicated and bloat the orchestrator with a huge number of tasks that are

I'm using Typescript with SystemJS for module loading and Gulp for task runner in my Angular 2 project. The current version of Angular in the project is RC2 but the problem is present also with RC1. I followed the steps of brando's answer here . After bundling my application and initial load of the website SystemJS throws error: Error: http://localhost:57462/app/app.bundle.js detected as register but didn't execute. The application works but the error in the console definitely is not a good thing. I tested my configuration on empty project and the problem is present again so I think the

Getting to grips with Gulp and have a question. So I have a gulp CSS task like the below which works just fine: var sassDir = 'app/scss'; var targetCssDir = 'public/assets'; gulp.task('css', function(){ return gulp.src(sassDir + '/main.scss') .pipe(sass({ style: 'compressed' }).on('error', gutil.log)) .pipe(autoprefix('last 10 version')) .pipe(gulp.dest(targetCssDir));; }); But is there a way to add my vendor files like Bootstrap so it will be included for minification and concatenation. Hope you can advise.! aisin gulp-sass will meet your request. Pls let me show you how to compile Sass files

I am trying to minify my script files for which i am using gulp task runner And I am trying gulp-uglify plugin Code: gulp.task('concat', function() { return gulp.src('app/**/*.js') // .pipe(concat('script.js')) .pipe(uglify()) .pipe(gulp.dest('./dist/')) }); but i am getting error as when i try to run gulp task as gulp concat Any help would be appreciated haouarin The main error is generated when you're using ES6 format. Use the gulp-uglify-es module instead of 'gulp-uglify' to overcome this error. var uglify = require('gulp-uglify-es').default; Note: gulp-uglify-es is no longer being

Let's say I want to replace the version number in a bunch of files, many of which live in subdirectories. I will pipe the files through gulp-replace to run the regex-replace function; but I will ultimately want to overwrite all the original files . The task might look something like this: gulp.src([ './bower.json', './package.json', './docs/content/data.yml', /* ...and so on... */ ]) .pipe(replace(/* ...replacement... */)) .pipe(gulp.dest(/* I DONT KNOW */); So how can I end it so that each src file just overwrites itself, at its original location? Is there something I can pass to gulp.dest()

I need to insert the content of a stylesheet into the <head> of an HTML page. How can I do it in Gulp? Before (what I have): <head> <link href="style.css" rel="stylesheet" type="text/css" /> </head> After (what I want): <head> <style> p { color: pink; } </style> </head> Note that I do not need to inline CSS into the elements, but just put the contents of CSS in the <head> . OverZealous You could easily use gulp-replace , like so: var gulp = require('gulp'), replace = require('gulp-replace'), fs = require('fs'); // in your task return gulp.src(...) .pipe(replace(/<link href="style.css"[^>]*>/,