最新消息：看到那些跳动的图片、文字了吗？点击点击 O(∩_∩)O~~
    你的位置：OnlyLing - Web 前端开发者 > 若思若想 > 前端自动化工具gulp初体验

    前端自动化工具gulp初体验

    若思若想 onlyling 7694浏览

    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初体验

    与本文相关的文章