gulp学习整理

标签：

使用gulp:

1.解决Javascript和CSS的版本问题.

2.解决Javascript和CSS的依赖，在加载顺序上的问题，构建工具可以大大的减少此类问题.
3.在性能优化上，当项目有大量的JS文件时，请求的文件越多耗时越大，这样无疑拖慢了网页的速度，而gulp能够通过：文件合并，文件压缩进行解决。
4.在效率的提升上gulp能够做到：
　　vendor前缀：在CSS3使用越来越多的时候，我们都知道一些CSS的特性，不同的浏览器CSS有不同的前缀，如果我们手工添加将会很繁琐，而如果使用构建工具，很多构建工具可以自动给我添加CSS的Vendor前缀.
　　单元测试：JavaScript的单元测试在使用MVC或者MVVM的框架后，变得越来越容易，而单元测试是质量保证的一个很重要的手段，所以在提交之前，使用构建工具自动跑一遍我们的单元测试是非常重要的
　　代码分析：我们写的JavaScript很多时候会有一些潜在的bug, 比如忘了添加分号，某个变量没有等等，使用一些JavaScript的代码分析工具，可以很好的帮我们检查一些常见的问题。
　　HTML引用JavaScript或者CSS文件：比如我们需要使用Bower之类来引用前端JavaScript和CSS的第三方库，那么如果版本升级，添加移除等都用手工来修改HTML的话，第一比较耗时，第二比较容易疏漏，尤其是在我们需要切换Debug和production版本时将会有很多额外的工作，那么使用前端构建工具可以很好的解决这些问题。

gulp和grunt的比较？

grunt：

配置过于复杂
插件职责不单一 （就是不SRP）
临时文件目录多
性能慢 （因为临时文件多，自然读IO多)

gulp:
代码优先.并且相对grunt代码更加的简洁明了
基于流
1000+的插件

gulp的安装和使用：

1.Gulp安装：

首先我们需要安装nodejs,通过 -v 检查是否安装成功和版本 node -v ,npm -v

进行全局安装:npm install gulp -g 

全局安装后，还需要切换到项目的根目录下，单独为单个项目进行安装下；安装如下：npm install gulp

如果想在安装的时候把gulp写进package.json文件的依赖中，则可以加上 –save-dev  例：npm install gulp --save-dev

2.gulp的4个API：

1.gulp.task：
gulp.task(name [, deps, fn])
注册一个task, name 是task的名字，deps是可选项，就是这个task依赖的tasks, fn是task要执行的函数

2.gulp.src：
gulp.src(globs[, options])
与globs 匹配的文件，可以是string或者一个数组

3.gulp.dest

定义gulp.dest(path[, options]) 就是最终文件要输出的路径，options一般不用

4.gulp.watch

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) 就是监视文件的变化，然后运行指定的Tasks或者函数，这个相比Grunt需要使用插件，gulp本身就支持的很好。

3.使用gulp：

1.通过gulp init来创建并且配置package.config文件
2.手动创建gulpfile.js文件，gulp默认是调用该文件的
3.在DOS命令下下载需要的用插件如：npm install gulp-concat --save-dev
　　　　　　　　　　　　　　　　　 npm install gulp-strip-debug --save-dev
　　　　　　　　　　　　　　　　　 npm install gulp-uglify --save-dev
　　　　　　　　　　　　　　　　　 npm install gulp-jshint --save-dev
 　　　　　　　　　　　　　　　　　npm install gulp-rename --save-dev

在gulpfile中首先需要声明：var gulp = require(‘gulp‘);
　　　　　　　　　　　　 var jshint = require(‘gulp-jshint‘);
　　　　　　　　　　　　 gulp.task(‘jshint‘, function() {
　　　　　　　　　　　　 　　gulp.src(‘./src/scripts/*.js‘)
　　　　　　　　　　　　　　 .pipe(jshint())
　　　　　　　　　　　　　　 .pie(jshint.reporter(‘default‘));
　　　　　　　　　　　　});
在DOS命令中执行：gulp jshint

理解gulp.watch()的使用：

var gulp = require(‘gulp‘);
var concat = require(‘gulp-concat‘);
var uglify = require(‘gulp-uglify‘);

var paths = {
  scripts: [‘src/js/**/*.js‘],
  css: [‘src/css/**/*.css‘],
  // 把源文件html放在src下，会自动打包到指定目录下
  html: [‘src/html/**/*.html‘]
};

gulp.task(‘scripts‘, function() {

  return gulp.src(paths.scripts)
    .pipe(concat(‘all.js‘))
    .pipe(uglify())
    .pipe(gulp.dest(‘build/js‘));
});

gulp.task(‘css‘, function() {

  return gulp.src(paths.css)
    .pipe(concat(‘all.css‘))
    .pipe(gulp.dest(‘build/css‘));
});

// 监听html文件的改变
gulp.task(‘html‘,function(){
    return gulp.src(paths.html)
        .pipe(gulp.dest(‘html/‘));
});

// Rerun the task when a file changes
gulp.task(‘watch‘, function() {
  gulp.watch(paths.scripts, [‘scripts‘]);
  gulp.watch(paths.css, [‘css‘]);
  gulp.watch(paths.html, [‘html‘]);
});
 
// The default task (called when you run `gulp` from cli)
gulp.task(‘default‘, [‘scripts‘, ‘css‘, ‘html‘,‘watch‘]);

gulp学习整理

标签：

原文地址：http://www.cnblogs.com/xialinzhi/p/5744243.html