博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【转】Gulp入门基础教程
阅读量:5869 次
发布时间:2019-06-19

本文共 8578 字,大约阅读时间需要 28 分钟。

Gulp入门基础教程

  前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp,

真是摆脱了痛苦。发现了一篇很好的Gulp英文教程,整理翻译给大家看看。
为什么使用GulpGulp基于Node.js的前端构建工具,通过Gulp的插件可以实现前端
代码的编译(sass、less)、压缩、测试;图片的压缩;浏览器自动刷新,还有许多
强大的插件可以在查找。比起Grunt不仅配置简单而且更容易阅读和维护,我们
可以做一个对比:
Grunt:

sass: {    dist: {    options: {    style: 'expanded'    },    files: {    'dist/assets/css/main.css': 'src/styles/main.scss',    }    }    },    autoprefixer: {    dist: {    options: {    browsers: [    'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'    ]    },    src: 'dist/assets/css/main.css',    dest: 'dist/assets/css/main.css'    }    },    grunt.registerTask('styles', ['sass', 'autoprefixer']);

 

在Grunt里面,每个插件使用的方式相对独立,正如上面的代码通过sass插件

将main.sass文件编译成main.css文件,接着autoprefixer插件再对编译好的
main.css文件进行修改,最后覆盖main.css。那么覆盖文件就是多余的了,有没
办法做到sass和autoprefixer一并处理完再生成main.css?我们来看看Gulp是
如何做到的:
Gulp:

 
gulp.task('sass', function() {    return gulp.src('src/styles/main.scss')    .pipe(sass({ style: 'compressed' }))    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))    .pipe(gulp.dest('dist/assets/css'))    });

 

使用Gulp我们只需要放一个路径,通过管道方式使用插件,最后生成文件,是不是

有种jQuery的感觉。这种方式不仅提高效率而且一眼就看清了输入文件和输出
文件,再也不用看gruntfile看得眼花缭乱了。
再打个比喻,Grunt的插件就像独立的工厂,这个工厂生成出来的产品打包封装好后
再送到另一个工厂去加工,使用了Gulp后实现了工厂的合并,所有东西都在一个
工厂里完成了。现在是否对Gulp感兴趣了,那就开始使用Gulp吧!
安装
首先我们要全局安装一遍:

  1. $ npm install gulp -g
复制代码

接着我们要进去到项目的根目录再安装一遍(确保你根目录存在package.json文件):

  1. $ npm install gulp --save-dev
复制代码

—save-dev这个属性会将条目保存到你package.json的devDependencies里面

安装Gulp插件
我们将要使用Gulp插件来完成我们以下任务:

  • sass的编译()
  • 自动添加css前缀()
  • 压缩css()
  • js代码校验()
  • 合并js文件()
  • 压缩js代码()
  • 压缩图片()
  • 自动刷新页面()
  • 图片缓存,只有图片替换了才压缩()
  • 更改提醒()
  • 清除文件()

安装这些插件需要运行如下命令:

  1. $ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
复制代码

上面是一些常用的插件,如果想要找更多的插件点击

加载插件
接着我们要创建一个gulpfile.js在根目录下,然后在里面加载插件:

1     var gulp = require('gulp'), 2     sass = require('gulp-ruby-sass'), 3     autoprefixer = require('gulp-autoprefixer'), 4     minifycss = require('gulp-minify-css'), 5     jshint = require('gulp-jshint'), 6     uglify = require('gulp-uglify'), 7     imagemin = require('gulp-imagemin'), 8     rename = require('gulp-rename'), 9     concat = require('gulp-concat'),10     notify = require('gulp-notify'),11     cache = require('gulp-cache'),12     livereload = require('gulp-livereload'),13     del = require('del');

 

Gulp的插件和Grunt有些许不一样,Grunt插件是为了更好的完成一项任务。

就像Grunt的imagemin插件就利用了缓存来避免重复压缩,而Gulp要利用
gulp-cache来完成,当然啦,不仅限定于缓存图片。

 建立任务

编译sass、自动添加css前缀和压缩
首先我们编译sass,添加前缀,保存到我们指定的目录下面,还没结束,我们还
要压缩,给文件添加.min后缀再输出压缩文件到指定目录,最后提醒任务完成了:

 
1     gulp.task('styles', function() { 2     return gulp.src('src/styles/main.scss') 3     .pipe(sass({ style: 'expanded' })) 4     .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) 5     .pipe(gulp.dest('dist/assets/css')) 6     .pipe(rename({suffix: '.min'})) 7     .pipe(minifycss()) 8     .pipe(gulp.dest('dist/assets/css')) 9     .pipe(notify({ message: 'Styles task complete' }));10     });

让我解释一下:

1 gulp.task('styles', function () {...});

gulp.task这个API用来创建任务,在命令行下可以输入$ gulp styles来执行上面

的任务。

return gulp.src('src/styles/main.scss')

gulp.src这个API设置需要处理的文件的路径,可以是多个文件以数组的

形式[main.scss, vender.scss],也可以是正则表达式/**/*.scss。

.pipe(sass({ style: 'expanded' }))

我们使用.pipe()这个API将需要处理的文件导向sass插件,那些插件的用法

可以在github上找到,为了方便大家查找我已经在上面列出来了。

.pipe(gulp.dest('dist/assets/css'));

gulp.dest()API设置生成文件的路径,一个任务可以有多个生成路径,一个可以

输出未压缩的版本,另一个可以输出压缩后的版本。
为了更好的了解Gulp API,强烈建议看一下,其实Gulp API就这么
几个,没什么好可怕的。
js代码校验、合并和压缩
希望大家已经知道如何去创建一个任务了,接下来我们完成scripts的校验、合并和
压缩的任务吧:

1     gulp.task('scripts', function() { 2     return gulp.src('src/scripts/**/*.js') 3     .pipe(jshint('.jshintrc')) 4     .pipe(jshint.reporter('default')) 5     .pipe(concat('main.js')) 6     .pipe(gulp.dest('dist/assets/js')) 7     .pipe(rename({suffix: '.min'})) 8     .pipe(uglify()) 9     .pipe(gulp.dest('dist/assets/js'))10     .pipe(notify({ message: 'Scripts task complete' }));11     });

 

需要提醒的是我们要设置JSHint的reporter方式,上面使用的是default默认的,

了解更多点击。

压缩图片

gulp.task('images', function() {    return gulp.src('src/images/**/*')    .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))    .pipe(gulp.dest('dist/assets/img'))    .pipe(notify({ message: 'Images task complete' }));    });

这个任务使用imagemin插件把所有在src/images/目录以及其子目录下的所有图

片(文件)进行压缩,我们可以进一步优化,利用缓存保存已经压缩过的图片,
使用之前装过的gulp-cache插件,不过要修改一下上面的代码:
将这行代码:.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))

 

修改成:

.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))

现在,只有新建或者修改过的图片才会被压缩了。

清除文件
在任务执行前,最好先清除之前生成的文件:

gulp.task('clean', function(cb) {    del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)    });

在这里没有必要使用Gulp插件了,可以使用NPM提供的插件。我们用一个回调

函数(cb)确保在退出前完成任务。
设置默认任务(default)
我们在命令行下输入$ gulp执行的就是默认任务,现在我们为默认任务指定执行上面
写好的三个任务:

1     gulp.task('default', ['clean'], function() {2     gulp.start('styles', 'scripts', 'images');3     });

在这个例子里面,clean任务执行完成了才会去运行其他的任务,在gulp.start()里

的任务执行的顺序是不确定的,所以将要在它们之前执行的任务写在数组里面。
监听文件
为了监听文件的是否修改以便执行相应的任务,我们需要创建一个新的任务,然后
利用gulp.watchAPI实现:

1     gulp.task('watch', function() {2     // Watch .scss files3     gulp.watch('src/styles/**/*.scss', ['styles']);4     // Watch .js files5     gulp.watch('src/scripts/**/*.js', ['scripts']);6     // Watch image files7     gulp.watch('src/images/**/*', ['images']);8     });

 

我们将不同类型的文件分开处理,执行对应的数组里的任务。现在我们可以在命令

行输入$ gulp watch执行监听任务,当.sass、.js和图片修改时将执行对应的任务。
自动刷新页面
Gulp也可以实现当文件修改时自动刷新页面,我们要修改watch任务,
配置LiveReload:

gulp.task('watch', function() {    // Create LiveReload server    livereload.listen();    // Watch any files in dist/, reload on change    gulp.watch(['dist/**']).on('change', livereload.changed);    });

要使这个能够工作,还需要在浏览器上安装LiveReload插件,除此之外还能这样做:

所有任务放一起

1     /*! 2     * gulp 3     * $ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev 4     */ 5     // Load plugins 6     var gulp = require('gulp'), 7     sass = require('gulp-ruby-sass'), 8     autoprefixer = require('gulp-autoprefixer'), 9     minifycss = require('gulp-minify-css'),10     jshint = require('gulp-jshint'),11     uglify = require('gulp-uglify'),12     imagemin = require('gulp-imagemin'),13     rename = require('gulp-rename'),14     concat = require('gulp-concat'),15     notify = require('gulp-notify'),16     cache = require('gulp-cache'),17     livereload = require('gulp-livereload'),18     del = require('del');19     // Styles20     gulp.task('styles', function() {21     return gulp.src('src/styles/main.scss')22     .pipe(sass({ style: 'expanded', }))23     .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))24     .pipe(gulp.dest('dist/styles'))25     .pipe(rename({ suffix: '.min' }))26     .pipe(minifycss())27     .pipe(gulp.dest('dist/styles'))28     .pipe(notify({ message: 'Styles task complete' }));29     });30     // Scripts31     gulp.task('scripts', function() {32     return gulp.src('src/scripts/**/*.js')33     .pipe(jshint('.jshintrc'))34     .pipe(jshint.reporter('default'))35     .pipe(concat('main.js'))36     .pipe(gulp.dest('dist/scripts'))37     .pipe(rename({ suffix: '.min' }))38     .pipe(uglify())39     .pipe(gulp.dest('dist/scripts'))40     .pipe(notify({ message: 'Scripts task complete' }));41     });42     // Images43     gulp.task('images', function() {44     return gulp.src('src/images/**/*')45     .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))46     .pipe(gulp.dest('dist/images'))47     .pipe(notify({ message: 'Images task complete' }));48     });49     // Clean50     gulp.task('clean', function(cb) {51     del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)52     });53     // Default task54     gulp.task('default', ['clean'], function() {55     gulp.start('styles', 'scripts', 'images');56     });57     // Watch58     gulp.task('watch', function() {59     // Watch .scss files60     gulp.watch('src/styles/**/*.scss', ['styles']);61     // Watch .js files62     gulp.watch('src/scripts/**/*.js', ['scripts']);63     // Watch image files64     gulp.watch('src/images/**/*', ['images']);65     // Create LiveReload server66     livereload.listen();67     // Watch any files in dist/, reload on change68     gulp.watch(['dist/**']).on('change', livereload.changed);69     });

在上有源码,并且附上Grunt的实现作为对比。

参考链接:

 

转载地址:http://ettnx.baihongyu.com/

你可能感兴趣的文章
Java基础学习总结(8)——super关键字
查看>>
listview当选中某一个item时设置背景色其他的不变
查看>>
Eclipse Indigo 3.7 中文字体偏小解决方案: Consolas 微软雅黑混合字体!
查看>>
Hive 0.11 升级踩坑记——HiveServer2的imperson问题
查看>>
Maven学习总结(七)——eclipse中使用Maven创建Web项目
查看>>
Spring MVC常用注解说明
查看>>
CetOS(RHEL) 5.3下网卡绑定设置指南
查看>>
在Javascript中闭包(Closure)
查看>>
omap_hwmod: rtc: doesn't have mpu register target
查看>>
Linux执行ls,会引起哪些系统调用
查看>>
Linux 32位系统支持4G以上内存
查看>>
记录一些有用的代码技巧,不定期更新
查看>>
打造全民健康平台 加速实现智慧医疗
查看>>
集成商聚焦
查看>>
CentOS5.8配置×××服务器
查看>>
Monkey测试
查看>>
2014-8-10 北漂三周年
查看>>
tornado 服务器 - 读写2进制rest请求
查看>>
IBM is still thinking!
查看>>
我的友情链接
查看>>