{"id":14967712,"url":"https://github.com/wscats/glup","last_synced_at":"2025-10-25T21:31:37.967Z","repository":{"id":72736053,"uuid":"52755908","full_name":"Wscats/glup","owner":"Wscats","description":"Some of the gulp tutorial -《gulp笔记》","archived":false,"fork":false,"pushed_at":"2019-11-18T09:59:04.000Z","size":79,"stargazers_count":175,"open_issues_count":1,"forks_count":56,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-01-31T10:36:10.029Z","etag":null,"topics":["babel","clean","gulp","gulp-plugin","jade","less","minify","rename","sass","scss","typescript","uglify"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Wscats.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-02-29T01:47:56.000Z","updated_at":"2024-11-07T07:16:19.000Z","dependencies_parsed_at":"2024-02-15T21:52:05.452Z","dependency_job_id":null,"html_url":"https://github.com/Wscats/glup","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wscats%2Fglup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wscats%2Fglup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wscats%2Fglup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wscats%2Fglup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wscats","download_url":"https://codeload.github.com/Wscats/glup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238212407,"owners_count":19434955,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","clean","gulp","gulp-plugin","jade","less","minify","rename","sass","scss","typescript","uglify"],"created_at":"2024-09-24T13:38:30.024Z","updated_at":"2025-10-25T21:31:32.709Z","avatar_url":"https://github.com/Wscats.png","language":"JavaScript","readme":"# Gulp\n\n## 配置\n\n类似于`grunt`，都是基于`Node.js`的前端构建工具。不过gulp压缩效率更高\n\n工具和原料\n\n- [nodejs](http://nodejs.cn/)\n- [npm](https://www.npmjs.com/)\n\n方法和步骤\n\n首先要确保系统上装有`node`，然后在全局环境和项目文件中安装`gulp`\n```bash\nnpm install gulp -g # global环境\nnpm install gulp --save-dev # 项目环境\n```\n在项目中安装需要的`gulp`插件，一般只压缩的话需要\n```bash\nnpm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev\n```\n更多插件可以在这个链接中找到 http://gratimax.net/search-gulp-plugins\n\n在项目的根目录新建`gulpfile.js`，引入需要的模块\n\n```js\nvar gulp = require('gulp'),\n    minifycss = require('gulp-minify-css'),\n    concat = require('gulp-concat'),\n    uglify = require('gulp-uglify'),\n    rename = require('gulp-rename'),\n    del = require('del');\n```\n压缩`css`文件\n```js\ngulp.task('minifycss', function() {\n    return gulp.src('src/*.css') //压缩的文件\n        .pipe(gulp.dest('minified/css')) //输出文件夹\n        .pipe(minifycss()); //执行压缩\n});\n```\n压缩`js`文件\n```js\ngulp.task('minifyjs', function() {\n    // gulp.src([])可以用数组的形式加载不同格式，不同位置的文件\n    return gulp.src('src/*.js')\n        .pipe(concat('main.js')) //合并所有js到main.js\n        .pipe(gulp.dest('minified/js'))  //输出main.js到文件夹\n        .pipe(rename({suffix: '.min'}))  //rename压缩后的文件名\n        .pipe(uglify()) //压缩\n        .pipe(gulp.dest('minified/js')); //输出\n});\n```\n执行压缩前，先删除文件夹里的内容\n```js\ngulp.task('clean', function(cb) {\n    del(['minified/css', 'minified/js'], cb)\n});\n```\n默认命令，在`cmd`中输入`gulp`后，执行的就是这个命令\n```js\ngulp.task('default', ['clean'], function() {\n    gulp.start('minifycss', 'minifyjs');\n});\n```\n\n然后只要`cmd`中执行`gulp`即可\n\n## 插件开发\n\n借助`through2`模块处理流，封装一个函数去处理\n```js\nvar { dest, src } = require('gulp');\nvar through = require('through2');\nsrc('./input.txt').pipe(((prefix) =\u003e {\n    console.log(prefix)\n    if (!prefix) {\n        prefix = \"\";\n    }\n    var prefix = Buffer.from(prefix);\n    var stream = through.obj(function (file, encoding, callback) {\n        // 如果file类型不是buffer 退出不做处理\n        if (!file.isBuffer()) {\n            return callback();\n        }\n        // 将字符串加到文件数据开头\n        file.contents = Buffer.concat([prefix, file.contents]);\n        // 确保文件会传给下一个插件\n        this.push(file);\n        // 告诉stream引擎，已经处理完成\n        callback();\n    });\n    return stream;\n})('')).pipe(dest('./output'));\n```\n开发时候注意要理解流的概念，`through`处理后的`file`对象是一个`vinyl`类型，`vinyl`可以理解为是`buffer`加了路径的类型，如下面这个例子\n```js\nvar Vinyl = require('vinyl');\nvar file = new Vinyl({\n    cwd: '/',\n    base: '/test/',\n    path: '/test/file.js',\n    contents: Buffer.from('Yao')\n}); // \u003cFile \"file.js\" \u003cBuffer 59 61 6f\u003e\u003e\nvar prefix = Buffer.from('Eno'); // \u003cBuffer 45 6e 6f\u003e\n// bufferData经过through处理为gulp能识别的流形式，再用pipe处理\nvar bufferData = Buffer.concat([prefix, file.contents]); // \u003cBuffer 45 6e 6f 59 61 6f\u003e\n```\n我们可以使用`file.contents`转化为`Buffer`类型，结合`Buffer.from(string)`和`Buffer.concat()`制作一个新的`Buffer`数据，然后通过`through`处理为`gulp`能识别的流，注意`through`和`stream`的流形式是不兼容的，虽然他们都有`pipe`方法\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwscats%2Fglup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwscats%2Fglup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwscats%2Fglup/lists"}