前端从零单排之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事情的,一旦失足就需要人肉重新启动。

以上即全文,愿望对人人能有协助。

参考文章

    原文作者:duian
    原文地址: https://segmentfault.com/a/1190000000494326
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞