Gulp入门教程
来源:互联网 发布:家族信托 知乎 编辑:程序博客网 时间:2024/04/28 07:10
前言
最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp,真是摆脱了痛苦。发现了一篇很好的Gulp英文教程,整理翻译给大家看看。
为什么使用Gulp
Gulp基于Node.js的前端构建工具,通过Gulp的插件可以实现前端代码的编译(sass、less)、压缩、测试;图片的压缩;浏览器自动刷新,还有许多强大的插件可以在这里查找。比起Grunt不仅配置简单而且更容易阅读和维护,我们可以做一个对比:
Grunt:
12345678910111213141516171819202122
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:
123456
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的编译(gulp-ruby-sass)
- 自动添加css前缀(gulp-autoprefixer)
- 压缩css(gulp-minify-css)
- js代码校验(gulp-jshint)
- 合并js文件(gulp-concat)
- 压缩js代码(gulp-uglify)
- 压缩图片(gulp-imagemin)
- 自动刷新页面(gulp-livereload)
- 图片缓存,只有图片替换了才压缩(gulp-cache)
- 更改提醒(gulp-notify)
- 清除文件(del)
安装这些插件需要运行如下命令:
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在根目录下,然后在里面加载插件:
12345678910111213
var gulp = require('gulp'),sass = require('gulp-ruby-sass'),autoprefixer = require('gulp-autoprefixer'),minifycss = require('gulp-minify-css'),jshint = require('gulp-jshint'),uglify = require('gulp-uglify'),imagemin = require('gulp-imagemin'),rename = require('gulp-rename'),concat = require('gulp-concat'),notify = require('gulp-notify'),cache = require('gulp-cache'),livereload = require('gulp-livereload'),del = require('del');
Gulp的插件和Grunt有些许不一样,Grunt插件是为了更好的完成一项任务。就像Grunt的imagemin
插件就利用了缓存来避免重复压缩,而Gulp要利用gulp-cache
来完成,当然啦,不仅限定于缓存图片。
建立任务
编译sass、自动添加css前缀和压缩
首先我们编译sass,添加前缀,保存到我们指定的目录下面,还没结束,我们还要压缩,给文件添加.min
后缀再输出压缩文件到指定目录,最后提醒任务完成了:
12345678910
gulp.task('styles', function() {return gulp.src('src/styles/main.scss').pipe(sass({ style: 'expanded' })).pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')).pipe(gulp.dest('dist/assets/css')).pipe(rename({suffix: '.min'})).pipe(minifycss()).pipe(gulp.dest('dist/assets/css')).pipe(notify({ message: 'Styles task complete' }));});
让我解释一下:
1
gulp.task('styles', function () {...});
gulp.task
这个API用来创建任务,在命令行下可以输入$ gulp styles
来执行上面的任务。
1
return gulp.src('src/styles/main.scss')
gulp.src
这个API设置需要处理的文件的路径,可以是多个文件以数组的形式[main.scss, vender.scss]
,也可以是正则表达式/**/*.scss
。
1
.pipe(sass({ style: 'expanded' }))
我们使用.pipe()
这个API将需要处理的文件导向sass插件,那些插件的用法可以在github上找到,为了方便大家查找我已经在上面列出来了。
1
.pipe(gulp.dest('dist/assets/css'));
gulp.dest()
API设置生成文件的路径,一个任务可以有多个生成路径,一个可以输出未压缩的版本,另一个可以输出压缩后的版本。
为了更好的了解Gulp API,强烈建议看一下Gulp API文档,其实Gulp API就这么几个,没什么好可怕的。
js代码校验、合并和压缩
希望大家已经知道如何去创建一个任务了,接下来我们完成scripts的校验、合并和压缩的任务吧:
1234567891011
gulp.task('scripts', function() {return gulp.src('src/scripts/**/*.js').pipe(jshint('.jshintrc')).pipe(jshint.reporter('default')).pipe(concat('main.js')).pipe(gulp.dest('dist/assets/js')).pipe(rename({suffix: '.min'})).pipe(uglify()).pipe(gulp.dest('dist/assets/js')).pipe(notify({ message: 'Scripts task complete' }));});
需要提醒的是我们要设置JSHint的reporter方式,上面使用的是default默认的,了解更多点击这里。
压缩图片
123456
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插件,不过要修改一下上面的代码:
将这行代码:
1
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
修改成:
1
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
现在,只有新建或者修改过的图片才会被压缩了。
清除文件
在任务执行前,最好先清除之前生成的文件:
123
gulp.task('clean', function(cb) {del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)});
在这里没有必要使用Gulp插件了,可以使用NPM提供的插件。我们用一个回调函数(cb
)确保在退出前完成任务。
设置默认任务(default)
我们在命令行下输入$ gulp
执行的就是默认任务,现在我们为默认任务指定执行上面写好的三个任务:
123
gulp.task('default', ['clean'], function() {gulp.start('styles', 'scripts', 'images');});
在这个例子里面,clean任务执行完成了才会去运行其他的任务,在gulp.start()
里的任务执行的顺序是不确定的,所以将要在它们之前执行的任务写在数组里面。
监听文件
为了监听文件的是否修改以便执行相应的任务,我们需要创建一个新的任务,然后利用gulp.watch
API实现:
12345678
gulp.task('watch', function() {// Watch .scss filesgulp.watch('src/styles/**/*.scss', ['styles']);// Watch .js filesgulp.watch('src/scripts/**/*.js', ['scripts']);// Watch image filesgulp.watch('src/images/**/*', ['images']);});
我们将不同类型的文件分开处理,执行对应的数组里的任务。现在我们可以在命令行输入$ gulp watch
执行监听任务,当.sass
、.js
和图片修改时将执行对应的任务。
自动刷新页面
Gulp也可以实现当文件修改时自动刷新页面,我们要修改watch
任务,配置LiveReload:
123456
gulp.task('watch', function() {// Create LiveReload serverlivereload.listen();// Watch any files in dist/, reload on changegulp.watch(['dist/**']).on('change', livereload.changed);});
要使这个能够工作,还需要在浏览器上安装LiveReload插件,除此之外还能这样做
所有任务放一起
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
/*!* gulp* $ 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*/// Load pluginsvar gulp = require('gulp'),sass = require('gulp-ruby-sass'),autoprefixer = require('gulp-autoprefixer'),minifycss = require('gulp-minify-css'),jshint = require('gulp-jshint'),uglify = require('gulp-uglify'),imagemin = require('gulp-imagemin'),rename = require('gulp-rename'),concat = require('gulp-concat'),notify = require('gulp-notify'),cache = require('gulp-cache'),livereload = require('gulp-livereload'),del = require('del');// Stylesgulp.task('styles', function() {return gulp.src('src/styles/main.scss').pipe(sass({ style: 'expanded', })).pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')).pipe(gulp.dest('dist/styles')).pipe(rename({ suffix: '.min' })).pipe(minifycss()).pipe(gulp.dest('dist/styles')).pipe(notify({ message: 'Styles task complete' }));});// Scriptsgulp.task('scripts', function() {return gulp.src('src/scripts/**/*.js').pipe(jshint('.jshintrc')).pipe(jshint.reporter('default')).pipe(concat('main.js')).pipe(gulp.dest('dist/scripts')).pipe(rename({ suffix: '.min' })).pipe(uglify()).pipe(gulp.dest('dist/scripts')).pipe(notify({ message: 'Scripts task complete' }));});// Imagesgulp.task('images', function() {return gulp.src('src/images/**/*').pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))).pipe(gulp.dest('dist/images')).pipe(notify({ message: 'Images task complete' }));});// Cleangulp.task('clean', function(cb) {del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)});// Default taskgulp.task('default', ['clean'], function() {gulp.start('styles', 'scripts', 'images');});// Watchgulp.task('watch', function() {// Watch .scss filesgulp.watch('src/styles/**/*.scss', ['styles']);// Watch .js filesgulp.watch('src/scripts/**/*.js', ['scripts']);// Watch image filesgulp.watch('src/images/**/*', ['images']);// Create LiveReload serverlivereload.listen();// Watch any files in dist/, reload on changegulp.watch(['dist/**']).on('change', livereload.changed);});
在gist上有源码,并且附上Grunt的实现作为对比。
参考链接:http://markgoodyear.com/2014/01/getting-started-with-gulp/
- Gulp入门教程
- Gulp入门教程
- Gulp入门教程
- Gulp入门教程
- Gulp入门教程
- gulp入门教程
- gulp入门教程
- gulp入门教程
- gulp入门教程
- gulp详细入门教程
- gulp详细入门教程
- gulp详细入门教程
- gulp详细入门教程
- gulp详细入门教程
- gulp详细入门教程
- gulp详细入门教程
- gulp详细入门教程
- gulp详细入门教程
- MultipartEntity与UrlEncodedFormEntity区别
- 全栈工程师到底有什么用
- JS对数据分页的封装方法
- 剑指offer 快速排序
- 个人博客寻友情链接
- Gulp入门教程
- 《飞机大战》安卓游戏开发源码(一)
- 《飞机大战》安卓游戏开发源码(二)
- 《飞机大战》安卓游戏开发源码(三)
- linux打包工具tar及一些压缩工具
- sts Spring tool suite中更改tomcat的默认发布目录
- 《飞机大战》安卓游戏开发源码(四)
- GCD多线程编程
- 《飞机大战》安卓游戏开发源码(终)