gulp入门篇(一）

1.gulp简介:

  gulp是一个前端自动化的工具【构建工具】,使用流(stream)来处理内容。

2. gulp的主要用于:

• 搭建web服务器

• 使用预处理器Sass，Less

• 压缩优化资源，可以压缩JS CSS Html 图片

• 自动将更新变化的代码实时显示在浏览器【前端实时化】

• ……

gulp还提供了丰富的插件,可自行查询……

---

3. gulp使用的前提

1. 安装node.js
2. 在项目根目录下执行 npm init  创建package.json.
   npm install gulp -g //全局安装
   npm install gulp –save-dev //本地安装并加入package.json

推荐：第2种,安装gulp模块,并且添加依赖到package.json文件。

4.gulp常见的api

• gulp.src() : 获得资源
• gulp.dest(): 输出资源
• gulp.task():创建任务
• gulp.watch():监视文件系统,文件改动时自动处理
• gulp.pipe():管道

---

5.gulp使用说明

  默认情况下 gulp 运行的时候会引入项目目录下的 gulpfile.js 文件
  在根目录下创建gulpfile.js

在gulpfile.js文件中编写gulp任务代码.

gulpfile.js：

var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
    uglify = require('gulp-uglify'), //压缩js代码
    minifycss = require('gulp-minify-css'), //压缩css代码
    rename = require('gulp-rename'), //重命名
    clen = require('gulp-clean'); //清理档案


//静态服务器
gulp.task('server', function() {
    browserSync.init({   //服务器配置
        server: {
            baseDir: "./"
        }
    });
    //监控文件变化,保存时自动刷新浏览器.
    gulp.watch("*.html").on('change', browserSync.reload);
    gulp.watch("dist/js/*.js", ['js-watch']);
    gulp.watch("dist/css/*.css", ['css']);
});

//处理css代码的任务
gulp.task('css',['clean'],function(){
  return gulp.src('dist/css/*.css')
  .pipe(minifycss())
  .pipe(rename('index.min.css'))
  .pipe(gulp.dest('src/css'))
  .pipe(browserSync.stream()); //css代码变化时刷新的写法1
  //pipe(browserSync.reload({stream:true}))//写法2
});

//js代码的处理
gulp.task('js',['clean'],function(){
  return gulp.src('dist/js/*.js')
    .pipe(uglify()) 
    .pipe(rename('index.min.js'))
    .pipe(gulp.dest('src/js'));
});

//监视js代码的变化
gulp.task('js-watch', ['js'], browserSync.reload);

//gulp clean:
gulp.task('clean',function(){
   return gulp.src(['src/js','src/css'],{read:false}).pipe(clean());
});


//配置默认的任务
gulp.task('default',['server'],function(done){
  done();
});

说明
1. var uglify = require(‘gulp-uglify’); 是为了在模块中找到’gulp-uglify’赋值给变量uglify，在文件中使用.
2. 使用模块插件需要先本地安装，例如:
  npm intsall gulp-uglify --save-dev
3. gulp.task(str,option,fn)
  str为任务名称,唯一标识任务，option为任务名数组，在此任务执行前先触发的任务，fn为回调函数。
特别注意option里的任务
- 同步:

gulp.task('default', ['clean', 'less', 'images', 'js', 'watch']); 

- 异步：

gulp.task('default', ['clean'], function(){ 

     gulp.start('less', 'images', 'js', 'watch'); 

 });  

---

gulp还能做什么？

gulp能做的远不止这些,作为设计理念领先的构建工具，gulp的魅力远不止于此。

其它的插件:

• gulp-jshint: js代码静态检查工具
• gulp-sass: sass的预处理器
• gulp-autoprefixer:根据设置浏览器版本自动处理浏览器前缀
• gulp-imagemin：图片压缩
• gulp-concat:合并文件
• gulp-rev：对文件名加MD5后缀
• ……..

见名知义: 这些插件提供的功能，给前端的开发助力不少，第一次使用比较震撼。

文尾语:

《JavaScript Web应用开发》一书是一本难得介绍前端自动化的书籍：

重点内容:
1. 构建优先
2. 模块化
3. 测试和resultful设计

1.构建优先

• 在前端开发中使用自动化技术,处理例如:避免重复的任务,使用简单的开发工具监控生产版本，在工作流程中使用自动化技术,专注于提升应用的代码质量。构建过程包括安装依赖，编译代码，运行单元测试，以及执行其它重要的操作。

2.模块化

• 能够开发出可伸缩可维护的应用，模块化不仅可以确保应用的各个部分能够轻易的测试代码，而且还可以重用代码。降低复杂度。
• 学习如何把应用分成不同的组件，如何再把组件分成不同的模块，然后在模块中开发出作用单一的简洁函数。外部的包由包管理器处理，管理器管理版本，执行版本升级操作，就不用我们手动下载依赖了。

3.测试

• 我们要积极测试,关注可靠性方面的问题,要持续探索集成，学习编写测试。

4.resultful设计 阮一峰的博文

我的推荐： 这是一本值得仔细阅读的前端自动化的书籍，内容丰实，我会在后面的博文中继续更新gulp的内容和前端自动化的内容，该书的读书笔记也会陆续更新。