前端从零单排之Gulp(第二期)


gulp 是个类似于grunt的前端工作流工具,今天就简单的介绍一下gulp和一些我的使用感受

Installing gulp

在Terminal中安装全局gulp

npm install -g gulp

切换到你的前端工作目录下

npm install gulp --save-dev

Tips: 确保你的前端工作目录下有package.json这个文件

然后gulp就已经安装好了,马上就可以进入简单的配置了。

Simple

// Include gulp
var gulp = require('gulp');

// Include plugins
var less = require('less');

// Register task
gulp.task('less', function(){
  gulp.src('src/less/*.less')
      .pipe(less())
      .pipe('dest/css/main.css');
})
// Task default
gulp.task('default', function(){
    gulp.run('less');
})

以上即是gulp的简单例子了,相比于grunt的配置,只能说真心简单了好几个数量级。

Install gulp plugins

  • Less compile (gulp-less)
  • Autoprefixer (gulp-autoprefixer)
  • Minify CSS (gulp-minify-css)
  • JSHint (gulp-jshint)
  • Concatenation (gulp-concat)
  • Uglify (gulp-uglify)
  • Compress images (gulp-imagemin)
  • LiveReload (gulp-livereload)
  • Clean files for a clean build (gulp-clean)
  • Caching of images so only changed images are compressed (gulp-cache)
  • Notify of changes (gulp-notify)

Tips: 每个gulp plugin 使用方法可在https://www.npmjs.org/package/gulp-即为你要插件,如 https://www.npmjs.org/package/gulp-less 就是gulp-less的使用方法

gulp零零碎碎介绍的就这些了,想了解如何使用coffee配置gulp文件,以及比较复杂gulp流配置的可以参考下面参考文章中的gulpjs 配置文件

使用心得:使用gulp近10来天的时间,感觉相对于grunt来说gulp的任务配置这块完全完胜,而且现在gulp目前的插件也完全能满足工作的需求。但是在使用gulp的工作之中会遇到一些问题。首先gulp是基于stream工作的,一旦出错就需要人肉重新启动。

以上即全文,希望对大家能有帮助。

参考文章


One response on “前端从零单排之Gulp(第二期)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>