最新消息:看到那些跳动的图片、文字了吗?点击点击 O(∩_∩)O~~

前端自动化工具gulp初体验

若思若想 onlyling 6862浏览

Glup使用node.js串流(streams)让建构更快速,不须写出资料到硬盘的暂存档案/目录。如果你想了解更多有关串流–虽然不是必须的–你可以阅读这篇文章。Gulp利用来源档案当作输入,串流到一群外挂(plugins),最后取得输出的结果,并非配置每一个外挂的输入与输出–就像Grunt。让我们来看个范例,分别在Gulp及Grunt建构Sass:

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的输入,并储存输出结果。在设置Autoprefixer时,需要将Sass的输出结果作为输入,产生出一个新档案。来看看在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中我们只需要输入一个档案即可。经过外挂Sass处理,再传到外挂Autoprefixer,最终取得一个档案。这样的流程加快建构过程,省去读取及写出不必要的档案,只需要最终的一个档案。

所以,有趣了,现在要?让我们开始安装gulp并建立一个基本的gulpfile,包含几个核心任务来作为入门吧。

安装gulp

深入设置任务之前,需先安装gulp:
npm install gulp -g

这会将gulp安装到全域环境下,让你可以存取gulp的CLI。接著,需要在本地端的专案进行安装。cd到你的专案根目录,执行下列指令(请先确定你有package.json档案):

npm install gulp --save-dev

上述指令将gulp安装到本地端的专案内,并纪录于package.json内的devDependencies物件。

安装gulp外挂

接著安装一些外挂,完成下列任务:
编译Sass (gulp-ruby-sass)
Autoprefixer (gulp-autoprefixer)
缩小化(minify)CSS (gulp-minify-css)
JSHint (gulp-jshint)
拼接 (gulp-concat)
丑化(Uglify) (gulp-uglify)
图片压缩 (gulp-imagemin)
即时重整(LiveReload) (gulp-livereload)
清理档案 (gulp-clean)
图片快取,只有更改过得图片会进行压缩 (gulp-cache)
更动通知 (gulp-notify)

执行下列指令来安装这些外挂:

npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev

指令将会安装必要的外挂,并纪录于package.json内的devDependencies物件。完整的gulp外挂清单可以在这裡找到。
这些插件对下载到nodejs的node_modules文件夹下,在另一个项目中就不需要安装了,直接执行关联。
在安装clean的时候会有一个错误提示,应该是插件名换了,根据提示从新安装就好了。在gulp.js文件里,还是使用clean。

载入外挂

接下来,我们需要建立一个gulpfile.js档案,并且载入这些外挂:

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'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload');

呼!看起来比Grunt有更多的事要做,对吧?Gulp外挂跟Grunt外挂有些许差异–它被设计成做一件事并且做好一件事。例如;Grunt的imagemin利用快取来避免重複压缩已经压缩好的图片。在Gulp中,这必须透过一个快取外挂来达成,当然,快取外挂也可以拿来快取其他东西。这让建构过程中增加了额外的弹性层面。蛮酷的,哼?

我们也可以像Grunt一样自动载入所有已安装的外挂,但这不在此文章目的,所以我们将维持在手动的方式。

建立任务

编译Sass,Autoprefix及缩小化

首先,我们设置编译Sass。我们将编译Sass、接著通过Autoprefixer,最后储存结果到我们的目的地。接著产生一个缩小化的.min版本、自动重新整理页面及通知任务已经完成:

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' }));
});

继续下去之前,一个小小的说明。

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

这个gulp.taskAPI用来建立任务。可以透过终端机输入$ gulp styles指令来执行上述任务。

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

这个gulp.srcAPI用来定义一个或多个来源档案。允许使用glob样式,例如/**/*.scss比对多个符合的档案。传回的串流(stream)让它成为非同步机制,所以在我们收到完成通知之前,确保该任务已经全部完成。

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

这个gulp.srcAPI用来定义一个或多个来源档案。允许使用glob样式,例如/**/*.scss比对多个符合的档案。传回的串流(stream)让它成为非同步机制,所以在我们收到完成通知之前,确保该任务已经全部完成。

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

使用pipe()来串流来源档案到某个外挂。外挂的选项通常在它们各自的Github页面中可以找到。上面列表中我有留下各个外挂的连结,让你方便使用。

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

这个gulp.dest()API是用来设定目的路径。一个任务可以有多个目的地,一个用来输出扩展的版本,一个用来输出缩小化的版本。这个在上述的styles任务中已经有展示。

我建议阅读gulp的API文件,以了解这些函式方法。它们并不像看起来的那样可怕!

根据上面一个小例子,可以写出很多。贴出一个我最近使用的gulp.js

var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
clean = require('gulp-clean'),
cache = require('gulp-cache'),
rename = require('gulp-rename'),
notify = require('gulp-notify');

gulp.task('styles',function(){
return gulp.src('resource/css/**/*.css')
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(rename({suffix:'.min'}))
.pipe(minifycss())
.pipe(gulp.dest('assets/css'))
.pipe(notify({message:'Styles task complete'}));
});
gulp.task('scripts', function() {
return gulp.src('resource/js/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('assets/js'))
.pipe(notify({ message: 'Scripts task complete' }));
});
gulp.task('images', function() {
return gulp.src('resource/img/**/*')
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
.pipe(gulp.dest('assets/img'))
.pipe(notify({ message:'Images task complete' }));
});
gulp.task('clean',function(){
return gulp.src(['assets/css','assets/js','assets/img'], {read: false})
.pipe(clean());
});
gulp.task('watch',function(){
gulp.watch('resource/css/**/*.css',['styles']);
gulp.watch('resource/js/**/*.js',['scripts']);
gulp.watch('resource/img/**/*',['images']);
});
gulp.task('default',['clean','watch'],function(){
gulp.start('styles','scripts','images');
});

转载请注明:OnlyLing - Web 前端开发者 » 前端自动化工具gulp初体验