原 荐 gulp构建前端工程
- 发布时间: 2016/07/27 16:22
- 阅读: 895
- 收藏: 4
- 点赞: 4
- 评论: 2
摘要
Gulp 是一个自动化工具，前端开发者可以使用它来处理常见任务： 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass、LESS 优化资源，比如压缩CSS、JavaScript、压缩图片 当然Gulp能做的远不止这些。如果你够疯狂，你甚至可以使用它搭建一个静态页面生成器。Gulp真的足够强大，但你必须学会驾驭它。 这是这篇文章的主要目的。帮助你了解Gulp的基础用法，助你早日完成一统天下的大业。 在我们深入了解之前，我们先来说说为什么是Gulp。 为什么是Gulp? 类似Gulp的工具，我们通常称之为构建工具。如今最流行的两个构建工具是Gulp和Grunt。 已...
什么是gulp？
gulp是新一代的前端项目构建工具，你可以使用gulp及其插件对你的项目代码（less,sass）进行编译，还可以压缩你的js和css代码，甚至压缩你的图片，gulp仅有少量的API，所以非常容易学习。 gulp 使用 stream 方式处理内容。Node催生了一批自动化工具，像Bower，Yeoman，Grunt等。
gulp和grunt的异同点
易于使用：采用代码优于配置策略，Gulp让简单的事情继续简单，复杂的任务变得可管理。
高效：通过利用Node.js强大的流，不需要往磁盘写中间文件，可以更快地完成构建。
高质量：Gulp严格的插件指导方针，确保插件简单并且按你期望的方式工作。
易于学习：通过把API降到最少，你能在很短的时间内学会Gulp。构建工作就像你设想的一样：是一系列流管道。 因为gulp是用node.js写的，所以你需要在你的终端上安装好npm。npm是node.js的包管理器，所以先在你的机子上安装好node.js吧
gulp安装命令
sudo npm install -g gulp
在根目录下新建package.json文件
npm init .安装gulp包
npm install gulp --save-dev
安装好后再次输入gulp -v查看版本号，如下图显示则为成功：
安装插件
安装常用插件：
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）安装这些插件需要运行如下命令：
$ 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 -save和-save-dev可以省掉你手动修改package.json文件的步骤。
npm install module-name -save 自动把模块和版本号添加到dependencies部分
npm install module-name -save-dev 自动把模块和版本号添加到devdependencies部分 gulp命令
你仅仅需要知道的5个gulp命令
gulp.task(name[, deps], fn) 定义任务 name：任务名称 deps：依赖任务名称 fn：回调函数 gulp.run(tasks...)：尽可能多的并行运行多个task gulp.watch(glob, fn)：当glob内容发生改变时，执行fn gulp.src(glob)：置需要处理的文件的路径，可以是多个文件以数组的形式，也可以是正则 gulp.dest(path[, options])：设置生成文件的路径 glob：可以是一个直接的文件路径。他的含义是模式匹配。gulp将要处理的文件通过管道（pipe()）API导向相关插件。通过插件执行文件的处理任务。
gulp.task('default', function () {...});
gulp.task这个API用来创建任务，在命令行下可以输入$ gulp [default]，（中括号表示可选）来执行上面的任务。
gulp官方API文档：https://github.com/gulpjs/gulp/blob/master/docs/API.md
gulp插件大全：http://gulpjs.com/plugins/
开始构建项目
在项目根目录下新建一个gulpfile.js文件，粘贴如下代码：
//在项目根目录引入gulp和uglify插件
var gulp = require('gulp');
var uglify = require('gulp-uglify'); gulp.task('compress',function(){ return gulp.src('script/*.js') .pipe(uglify()) .pipe(gulp.dest('dist')); }); 注：gulpfile.js文件名不可更改。
项目需要用到uglify和rename插件，执行以下命令安装：
npm install --save-dev gulp-uglify
npm install --save-dev gulp-rename以我的为例，进入gulpfile.js所在目录：
cd /Users/trigkit4/gulp-test然后输入：
var gulp = require('gulp');
var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); gulp.task('compress',function(){ return gulp.src('script/*.js') .pipe(uglify()) .pipe(rename('jquery.ui.min.js')) .pipe(gulp.dest('dist')); });该命令会安装package.json下的全部依赖，如下图所示：
完整的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'); // 样式 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/styles')) .pipe(rename({ suffix: '.min' })) .pipe(minifycss()) .pipe(gulp.dest('dist/styles')) .pipe(notify({ message: 'Styles task complete' })); }); // 脚本 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/scripts')) .pipe(rename({ suffix: '.min' })) .pipe(uglify()) .pipe(gulp.dest('dist/scripts')) .pipe(notify({ message: 'Scripts task complete' })); }); // 图片 gulp.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' })); }); // 清理 gulp.task('clean', function() { return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false}) .pipe(clean()); }); // 预设任务 gulp.task('default', ['clean'], function() { gulp.start('styles', 'scripts', 'images'); }); // 看守 gulp.task('watch', function() { // 看守所有.scss档 gulp.watch('src/styles/**/*.scss', ['styles']); // 看守所有.js档 gulp.watch('src/scripts/**/*.js', ['scripts']); // 看守所有图片档 gulp.watch('src/images/**/*', ['images']); // 建立即时重整伺服器 var server = livereload(); // 看守所有位在 dist/ 目录下的档案，一旦有更动，便进行重整 gulp.watch(['dist/**']).on('change', function(file) { server.changed(file.path); }); }); 注：pipe()是stream模块里传递数据流的一个方法，第一个参数为插件方法，插件会接收从上游流下的文件，进行处理加工后，再往下流。
gulp.task('任务名称', function () {
return gulp.src('文件路径') .pipe(...) .pipe(...) // 直到任务的最后一步 .pipe(...); }); 如果想使用gulp直接启动服务器
添加gulp-connect
npm install gulp-connect --save-dev
添加task
gulp.task('webserver', function() { connect.server({ livereload: true, port: 8888 }); });gulp插件
-
gulp-gh-pages：使用gulp来把markdown生成html文档并上传到git pages上
https://github.com/shinnn/gulp-gh-pages
var gulp = require('gulp');
var ghPages = require('gulp-gh-pages'); gulp.task('deploy', function() { return gulp.src('./dist/**/*') .pipe(ghPages()); }); -
gulp-jade插件：将jade编译成html文件 -
gulp-less插件：将less编译成css文件
var less = require('gulp-less');
var path = require('path'); gulp.task('less', function () { return gulp.src('./less/**/*.less') .pipe(less({ paths: [ path.join(__dirname, 'less', 'includes') ] })) .pipe(gulp.dest('./public/css')); }); -
gulp-live-server插件：方便的，轻量级的服务器
var gulp = require('gulp');
var gls = require('gulp-live-server'); gulp.task('serve', function() { //1. serve with default settings var server = gls.static(); //equals to gls.static('public', 3000); server.start(); //2. serve at custom port var server = gls.static('dist', 8888); server.start(); //3. serve multi folders var server = gls.static(['dist', '.tmp']); server.start(); //use gulp.watch to trigger server actions(notify, start or stop) gulp.watch(['static/**/*.css', 'static/**/*.html'], function (file) { server.notify.apply(server, [file]); }); }); -
gulp-livereload，可以实时保存刷新，那样就不用按F5和切换界面了
-
gulp-load-plugins：在你的package.json文件中自动加载任意的gulp插件
$ npm install --save-dev gulp-load-plugins
例如一个给定的package.json文件如下：
{
"dependencies": {
"gulp-jshint": "*",
"gulp-concat": "*" } } 在gulpfile.js中添加如下代码：
var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins'); var plugins = gulpLoadPlugins(); plugins.jshint = require('gulp-jshint');
plugins.concat = require('gulp-concat');
-
gulp-babel：gulp 的babel插件，
$ npm install --save-dev gulp-babel babel-preset-es2015使用方法：
const gulp = require('gulp');
const babel = require('gulp-babel'); gulp.task('default', () => { return gulp.src('src/app.js') .pipe(babel({ presets: ['es2015'] })) .pipe(gulp.dest('dist')); });官方
github： https://github.com/gulpjs/gulp
© 著作权归作者所有
- 点赞 (4)
- 收藏 (4)
199
到【灌水乐园】发言
引用来自“leonooo”的评论
从grunt到gulp，再到webpack，前端在于折腾！