Wscats / Glup
Some of the gulp tutorial -《gulp笔记》
Stars: ✭ 136
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Projects that are alternatives of or similar to Glup
Compile Hero
🔰Visual Studio Code Extension For Compiling Language
Stars: ✭ 169 (+24.26%)
Mutual labels: gulp, scss, sass, less, jade
Gulp Starter Kit
A simple Gulp 4 Starter Kit for modern web development.
Stars: ✭ 134 (-1.47%)
Mutual labels: gulp, babel, scss, sass, less
Wordless
All the power of Pug, Sass, Coffeescript and WebPack in your WordPress theme. Stop writing themes like it's 1998.
Stars: ✭ 1,374 (+910.29%)
Mutual labels: babel, scss, sass, jade
Gulp Pug Starter
Frontend development with pleasure. Pug + SCSS version
Stars: ✭ 228 (+67.65%)
Mutual labels: gulp, babel, scss, sass
Gulp Scss Starter
Frontend development with pleasure. SCSS version
Stars: ✭ 339 (+149.26%)
Mutual labels: gulp, babel, scss, sass
Fast
Develop, build, deploy, redeploy, and teardown frontend projects fast.
Stars: ✭ 126 (-7.35%)
Mutual labels: babel, scss, sass
Stylelint
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
Stars: ✭ 9,350 (+6775%)
Mutual labels: scss, sass, less
Baseguide
Lightweight and robust CSS framework for prototyping and production code.
Stars: ✭ 127 (-6.62%)
Mutual labels: gulp, scss, sass
Cessie
Transpile your CSS bundle to support CSS variables, calc, and future CSS for legacy browsers.
Stars: ✭ 81 (-40.44%)
Mutual labels: scss, sass, less
Vertical Rhythm
Put some typographical vertical rhythm in your CSS. LESS, Stylus and SCSS/SASS versions included.
Stars: ✭ 83 (-38.97%)
Mutual labels: scss, sass, less
Pug Sass Boilerplate Starter Kit
A Front-end template for building web apps or sites using Pug(Jade) and Sass
Stars: ✭ 92 (-32.35%)
Mutual labels: gulp, sass, jade
Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (+647.06%)
Mutual labels: babel, scss, sass
Dough
React/Redux + SASS + Gulp/Browserify/Babel skeleton codebase with demo application.
Stars: ✭ 38 (-72.06%)
Mutual labels: gulp, babel, sass
Nextjs Full Demo
Demo about integration between examples of next.js and also fix some issues during development
Stars: ✭ 76 (-44.12%)
Mutual labels: gulp, babel, scss
Three Dots
🔮 CSS loading animations made by single element.
Stars: ✭ 912 (+570.59%)
Mutual labels: scss, sass, less
Gulp Boilerplate
A boilerplate for building web projects with Gulp.js.
Stars: ✭ 840 (+517.65%)
Mutual labels: gulp, minify, sass
Bootstrap 4 Utilities
Bootstrap 4 utility classes in LESS CSS for Bootstrap 3 or any other projects.
Stars: ✭ 105 (-22.79%)
Mutual labels: scss, sass, less
Bootstrap 4 Sass Gulp 4 Boilerplate
A Bootstrap 4.5.2 boilerplate with font-awesome, sass, gulp 4 tasks
Stars: ✭ 103 (-24.26%)
Mutual labels: gulp, scss, sass
Rollup Plugin Styles
🎨 Universal Rollup plugin for styles: PostCSS, Sass, Less, Stylus and more.
Stars: ✭ 116 (-14.71%)
Mutual labels: scss, sass, less
Wordpress Starter
📦 A starter template for WordPress websites
Stars: ✭ 26 (-80.88%)
Mutual labels: gulp, babel, sass
Gulp
配置
类似于grunt
,都是基于Node.js
的前端构建工具。不过gulp压缩效率更高
工具和原料
方法和步骤
首先要确保系统上装有node
,然后在全局环境和项目文件中安装gulp
npm install gulp -g # global环境
npm install gulp --save-dev # 项目环境
在项目中安装需要的gulp
插件,一般只压缩的话需要
npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev
更多插件可以在这个链接中找到 http://gratimax.net/search-gulp-plugins
在项目的根目录新建gulpfile.js
,引入需要的模块
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
del = require('del');
压缩css
文件
gulp.task('minifycss', function() {
return gulp.src('src/*.css') //压缩的文件
.pipe(gulp.dest('minified/css')) //输出文件夹
.pipe(minifycss()); //执行压缩
});
压缩js
文件
gulp.task('minifyjs', function() {
// gulp.src([])可以用数组的形式加载不同格式,不同位置的文件
return gulp.src('src/*.js')
.pipe(concat('main.js')) //合并所有js到main.js
.pipe(gulp.dest('minified/js')) //输出main.js到文件夹
.pipe(rename({suffix: '.min'})) //rename压缩后的文件名
.pipe(uglify()) //压缩
.pipe(gulp.dest('minified/js')); //输出
});
执行压缩前,先删除文件夹里的内容
gulp.task('clean', function(cb) {
del(['minified/css', 'minified/js'], cb)
});
默认命令,在cmd
中输入gulp
后,执行的就是这个命令
gulp.task('default', ['clean'], function() {
gulp.start('minifycss', 'minifyjs');
});
然后只要cmd
中执行gulp
即可
插件开发
借助through2
模块处理流,封装一个函数去处理
var { dest, src } = require('gulp');
var through = require('through2');
src('./input.txt').pipe(((prefix) => {
console.log(prefix)
if (!prefix) {
prefix = "";
}
var prefix = Buffer.from(prefix);
var stream = through.obj(function (file, encoding, callback) {
// 如果file类型不是buffer 退出不做处理
if (!file.isBuffer()) {
return callback();
}
// 将字符串加到文件数据开头
file.contents = Buffer.concat([prefix, file.contents]);
// 确保文件会传给下一个插件
this.push(file);
// 告诉stream引擎,已经处理完成
callback();
});
return stream;
})('')).pipe(dest('./output'));
开发时候注意要理解流的概念,through
处理后的file
对象是一个vinyl
类型,vinyl
可以理解为是buffer
加了路径的类型,如下面这个例子
var Vinyl = require('vinyl');
var file = new Vinyl({
cwd: '/',
base: '/test/',
path: '/test/file.js',
contents: Buffer.from('Yao')
}); // <File "file.js" <Buffer 59 61 6f>>
var prefix = Buffer.from('Eno'); // <Buffer 45 6e 6f>
// bufferData经过through处理为gulp能识别的流形式,再用pipe处理
var bufferData = Buffer.concat([prefix, file.contents]); // <Buffer 45 6e 6f 59 61 6f>
我们可以使用file.contents
转化为Buffer
类型,结合Buffer.from(string)
和Buffer.concat()
制作一个新的Buffer
数据,然后通过through
处理为gulp
能识别的流,注意through
和stream
的流形式是不兼容的,虽然他们都有pipe
方法
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].