gulp构建工具工作流
先前学习了webpack,但是总是感觉webpack略显复杂，并且现在很多公司gulp工作流用的比较多，因此就入gulp的坑来踩一踩，技多不压身，霍霍霍...。
一、简介(增强和使你的工作自动化)
1. 使用简单
没有繁琐的配置，一个任务一个task。通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
2. 高效
利用node强大的工作流，快速的构建项目并减少频繁的 IO 操作。
3. 高质量
gulp生态圈有相当多优秀的插件以供我们使用，Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
4. 易学
通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。
二、gulp相关api
1. gulp.src: 来源
2. gulp.dest: 目标
3. gulp.pipe: 管道
4. gulp.watch: 热加载
5. gulp.task: 任务
6. gulp.task('default')
默认任务,必须存在
三、使用(工作流程)
1. 全局安装gulp
npm install -g gulp
2. 建立项目
mkdir gulp-test && cd gulp-test
3. 初始化项目
npm init -y (会生成package.json)
4. 安装项目依赖
npm install --save-dev gulp
- 创建配置文件
touch gulpfile.js
6. gulp常用的功能
转码（gulp-babel babel-preset-es2015 gulp-sass gulp-less gulp-react）、合并（gulp-concat）、压缩（gulp-uglify）、模块化（gulp-browserify）、测试（gulp-jasmine），请依次安装这些依赖。
7. 小常识
因为国外的网站比较慢 npm经常会卡住。我们可以设置镜像源或使用cnpm或者设置镜像源npm config set registry https://registry.npm.taobao.org
8. 写配置
（gulpfile一定有一个default的任务，你可以把每个任务分文件书写然后再require进来，这种方式适合多人同时书写任务时，可以防止多人修改同一文件导致的冲突）
var gulp = require("gulp");var babel = require("gulp-babel");var react = require("gulp-react");var sass = require("gulp-sass");var less = require("gulp-less");var uglify = require("gulp-uglify");var jasmine = require("gulp-jasmine");var concat = require("gulp-concat");//定义常量const transformJs = "transformJs";const transformSass = "transformSass";const transformLess = "transformLess";const test = 'test';//jsgulp.task(transformJs, function () { return gulp.src("src/*.js") .pipe(react()) .pipe(babel( { presets: ["babel-preset-es2015"] } )) .pipe(concat('bundle.min.js')) .pipe(uglify()) .pipe(gulp.dest("./dist"))});// scssgulp.task(transformSass, function () { return gulp.src("src/css/*.scss") .pipe(sass()) .pipe(gulp.dest("./dist"))});// lessgulp.task(transformLess, function () { return gulp.src("src/css/*.less") .pipe(less()) .pipe(gulp.dest("./dist"))});// jasminegulp.task(test, function () { return gulp.src("./test/*.js") .pipe(jasmine())});gulp.task("default", [transformJs, transformSass, transformLess, test]);四、配置文件解读
1. 第一部分
一堆reqire,是引用gulp相应的插件。在引用之前要确保己经安装。
2. 第二部分
几个const,是定义任务名常量，有多几任务就定义多少常量。
3. 第三部分
几个task,每个task对应一个任务，具有不同的功能。可以使用 gulp xxx来启动这个任务。
4. 第四部分
default,是执行gulp之后就会开始的任务 常用参数('default',[task1,task2,...],callback[可选])。
五、执行
- 如果要执行default任务，直接gulp
[09:56:04] Using gulpfile e:\oscchina\gulp-start-kit\gulpfile.js [09:56:04] Starting 'transformJs'... [09:56:04] Starting 'transformSass'... [09:56:04] Starting 'transformLess'... [09:56:04] Starting 'test'... . 1 spec, 0 failures Finished in 0 seconds [09:56:04] Finished 'test' after 62 ms [09:56:06] Finished 'transformLess' after 2.66 s [09:56:06] Finished 'transformSass' after 2.68 s [09:56:06] Finished 'transformJs' after 2.7 s [09:56:06] Finished 'default' after 32 μs Process finished with exit code 0- 如果想要执行单个任务，请输入 gulp taskName,例如gulp test
[09:56:47] Using gulpfile e:\oscchina\gulp-start-kit\gulpfile.js [09:56:47] Starting 'test'... . 1 spec, 0 failures Finished in 0 seconds [09:56:47] Finished 'test' after 77 ms Process finished with exit code 0六、gulp常见任务
1. 处理js
（包括转码、合并、压缩） gulp-babel babel-preset-es2015 gulp-concat gulp-uglify
gulp.task(transformJs, function () { return gulp.src("src/*.js") .pipe(react()) .pipe(babel( { presets: ["babel-preset-es2015"] } )) .pipe(concat('bundle.min.js')) .pipe(uglify()) .pipe(gulp.dest("./dist"))});2. 处理scss
(包括转码、合并、压缩) gulp-sass gulp-concat gulp-uglify
// scss gulp.task(transformSass, function () { return gulp.src("src/css/*.scss") .pipe(sass()) .pipe(gulp.dest("./dist")) });3. 处理less
(包括转码、合并、压缩) gulp-less gulp-concat gulp-uglify
// less gulp.task(transformLess, function () { return gulp.src("src/css/*.less") .pipe(less()) .pipe(gulp.dest("./dist")) });4. 测试
gulp-jasmine
// jasmine gulp.task(test, function () { return gulp.src("./test/*.js") .pipe(jasmine()) }); //测试文件 test.spec.js describe('test one', function () { it('test', function () { expect(true).toBe(true); }) });5. 清理
gulp-clean
gulp.task('clean', function () { return gulp.src(config.dist + '/*', {read: false}) .pipe(clean());});6. 热加载
gulp-util gulp-watch
var util = require('gulp-util'); var watch = require('gulp-watch'); var config = {}; config.dist = 'dist'; config.static = [ 'bin/ /*', 'package.json' ]; // sync static resource in production mode gulp.task('static-sync', function () { return gulp.src(config.static, {base: './'}) .pipe(gulp.dest(config.dist)); }); gulp.task('static-sync:dev', ['static-sync'], function () { util.log('[Sync] starting file watch'); return watch(config.static, function (obj) { if (obj.event === 'change' || obj.event === 'add') return gulp.src(obj.path, {base: './'}) .pipe(gulp.dest(config.dist)) .pipe(print(function () { return '[Sync] file sync success: ' + obj.path.replace(obj.base, ''); })); else if (obj.event === 'unlink') { var distFilePath = obj.path.replace(__dirname, __dirname + '/' + config.dist); return gulp.src(distFilePath) .pipe(clean()) .pipe(print(function () { return '[Sync] file remove success: ' + obj.path.replace(obj.base, ''); })); } }); });7. debug
gulp-print
//下载npm install gulp-print//引用var gulp = require('gulp');var print = require('gulp-print');// 注册任务gulp.task('print', function() { gulp.src('test/*.js') .pipe(print())});8. sourceMap
gulp-sourcemaps
var sourcemaps = require('gulp-sourcemaps'); // compile server script in production mode gulp.task('compile:server', function () { if (config.babel.sourceMaps){ return gulp.src(' /*.es6', {base: './'}) .pipe(sourcemaps.init()) .pipe(babel(config.babel)) .pipe(sourcemaps.write('.', {sourceRoot: '/ustar'})) .pipe(gulp.dest(config.dist)); }else{ return gulp.src(' /*.es6', {base: './'}) .pipe(babel({ preset:'babel-preset-es2015' })) .pipe(gulp.dest('./dist')); });9. 复制静态资源
gulp.task('static-sync', function () { return gulp.src('src/css/*', {base: './'}) .pipe(gulp.dest('./dist'));});10. 处理css雪碧图
gulp-css-spriter
var gulp = require('gulp'); var spriter = require('gulp-css-spriter'); gulp.task('css', function() { return gulp.src('./src/css/styles.css') .pipe(spriter({ // The path and file name of where we will save the sprite sheet 'spriteSheet': './dist/images/spritesheet.png', // Because we don't know where you will end up saving the CSS file at this point in the pipe, // we need a litle help identifying where it will be. 'pathToSpriteSheetFromCSS': '../images/spritesheet.png' })) .pipe(gulp.dest('./dist/css')); });11. 压缩css
gulp-minify-css
gulp.task(gulp_minify_css,function () { return gulp.src('./dist/*.css') .pipe(print()) .pipe(minifycss()) .pipe(gulp.dest(config.dist)) });12. 压缩图片
gulp-imagemin
// 压缩图片 gulp.task('img', function() { return gulp.src('src/images/*') .pipe(imagemin({ progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngcrush()] })) .pipe(gulp.dest('./dest/images/')) .pipe(notify({ message: 'img task ok' })); });13. 检查js
gulp-jshint gulp-jshint
// 检查js gulp.task('lint', function() { return gulp.src('src/js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(notify({ message: 'lint task ok' })); });14. gzip压缩
gulp-gzip
var gulp = require('gulp'); var gzip = require('gulp-gzip'); gulp.task('compress', function() { gulp.src('./dev/scripts/*.js') .pipe(gzip()) .pipe(gulp.dest('./public/scripts')); });15. 处理前缀
gulp-autoprefixer
var gulp = require('gulp'); var autoprefixer = require('gulp-autoprefixer'); gulp.task('default', function () { return gulp.src('src/app.css') .pipe(sourcemaps.init()) .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) .pipe(concat('all.css')) .pipe(sourcemaps.write('.',{sourceRoot:config.dist})) .pipe(gulp.dest('dist')); });七、项目地址
gulp-start-kit
关键字：gulp, node, JavaScript, node.js
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！