Gulp基础

现在的前端已经不是那几年的前端了 要跟上时代的潮流 所以这几天就学习了下前端工程化中的自动化构造Gulp 但是由于目前公司并没有明确提出前端工程化这个概念 所以也只是掌握了皮毛 但为了防止遗忘 so 记录下来Gulp基础 方便后面来看 在这期间也借鉴了网上其他网友的方法

• Gulp概念
  Gulp是可以自动化执行任务的工具，在平时开发的流程里面，有一些动作是重复要去做的，比如压缩html,js,css,图片等等，一般就可以把这些动作创建成一个gulp任务，让它自动去之执行这些任务。期间gulp利用了nodejs的流概念，可以快速构建项目并减少频繁的IO操作，前一级的输出，直接变成后一级的输入，类似于jQuery中的链式操作，jQuery中返回的当前this对象，而gulp中返回的是nodejs对各种对象实现的抽象接口。

• Gulp安装
  ①首先确保你已经安装了node环境
  ②再全局安装gulpnpm install -g gulp
  
  ③切换到你的项目目录下面 项目安装gulp(这里用npm安装可能会报错 所以切换至淘宝的cnpm安装)cnpm install --save-dev gulp
  
  ④创建项目描述文件package.json
  npm，需要一个package.json的文件来管理依赖，可以手动创建该文件也可以使用npm init命令创建 npm init 但需要输入一些配置。
  
  name:项目名称
  version:项目版本号
  description:项目说明
  entry point:入门文件 当npm start的时候会执行此文件
  test command:测试脚本 当npm test的时候会执行此文件
  git repository:模块的git仓库
  keywords:在npmjs官网搜索时的关键字
  author:项目作者的名字
  license:授权协议

• Gulp使用
  ①在项目应用的根目录下面创建一个名叫gulpfile.js文件 所有的gulp自动化任务都写在这里面

  ②gulp提供的API需要关键掌握的就是：gulp.task()、gulp.src()、gulp.dest()、gulp.watch()

  ③gulp.task(name[,deps],fn) 该方法用来定义任务，name为任务名，deps是定义当前任务需要依赖的任务，当前定义的任务会在所依赖的任务完成后才开始执行，fn为定义任务执行动作。

  ④gulp.src(globs[,options]) 该方法用来引入nodejs中的stream流，然后通过stream的pipe()方法把流导入到你想要的地方，比如在gulp中就经常导入到插件中，当然流也可以写入到文件中。globs为文件匹配模式类似正则表达式，用来匹配文件路径包括文件名，当有多个匹配模式时，可以是一个数组；options为可选参数，一般使用不到。

  ⑤gulp.dest(path[,options]) 该方法是用来写文件的，path为写入文件的路径，options为可选参数，一般使用不到。

  ⑥gulp.watch(glob[,opts],tasks) 该方法是用来监视文件的变化，当文件发生了，可以执行相应的任务执行。glob为文件匹配模式；opts可选配置对象，一般使用不到；tasks为文件变化后要执行的任务，为一个数组。

• 具体实例
  ①压缩js文件 需要包依赖 gulp-uglify npm i --save-dev gulp-uglify

let gulp = require('gulp');let uglify = require('gulp-uglify');gulp.task('minifyJS',function(){    return gulp.src('./Home/js/*.js').    pipe(uglify())./*调用插件处理js*/    pipe(gulp.dest('dist/js'))/*处理好的文件写入dist文件夹js目录下*/}) ;gulp.task('default',['minifyJS']);在当前项目的命令行中键入 gulp

②压缩css文件 需包依赖gulp-minify-css npm i --save-dev gulp-minify-css

let gulp = require('gulp');let minifyCSS = require('gulp-minify-css');gulp.task('minifyCSS ',function(){    return gulp.src('./Home/css/*.css').    pipe(minifyCSS ())./*调用插件处理css*/    pipe(gulp.dest('dist/css'))/*处理好的文件写入dist文件夹css目录下*/}) ;gulp.task('default',['minifyCSS ']);在当前项目的命令行中键入 gulp

③压缩html文件 需要包依赖 gulp-htmlmin npm i --save-dev gulp-htmlmin

let gulp = require('gulp');const htmlMin = require('gulp-htmlmin');gulp.task('htmlMin', function () {    var options = {        collapseWhitespace: true, //清除空格        collapseBooleanAttributes: true, //省略布尔值属性的值比如：<input checked="checked"/>,那么设置这个属性后，就会变成 <input checked/>;        removeComments: true,//清除html页面中的注释        removeEmptyAttributes: true,//清除所有的空属性        removeScriptTypeAttributes: true,//清除所有script标签中的type="text/javascript"属性        removeStyleLinkTypeAttributes: true,//清除所有link标签上的type属性        minifyJS: true,//压缩js        minifyCSS: true//压缩css    };    return gulp.src('./Home/templatehandle.html').    pipe(htmlMin(options)).    pipe(gulp.dest('dist'))});gulp.task('default',['htmlMin']);在当前项目的命令行中键入 gulp

④压缩图片 需要包依赖 gulp-imagemin npm i --save-dev gulp-imagemin

let gulp = require('gulp');const imgMin = require('gulp-imagemin');gulp.task('imgMin',function(){    return gulp.src('./Home/imgs/*.png').     pipe(imgMin()).     pipe(gulp.dest('dist/imgs'))});gulp.task('default',['imgMin']);在当前项目的命令行中键入 gulp

⑤压缩png格式图片 需要包依赖imagemin-pngquant和④中的插件 npm i --save-dev imagemin-pngquant

let gulp = require('gulp');const imgMin = require('gulp-imagemin');const imgPngMin = require('imagemin-pngquant');gulp.task('imgMin',function(){    return gulp.src('./Home/imgs/*.png').     pipe(imgMin({            progressive: true,            use:         [imgPngMin()]        })).     pipe(gulp.dest('dist/imgs'))});gulp.task('default',['imgMin']);在当前项目的命令行中键入 gulp

⑥js语法检测 需要包依赖gulp-jshint npm i --save-dev gulp-jshint但是我当时尝试这样写报错 所以应该键入 npm install --save-dev jshint gulp-jshint 才正确

let gulp = require('gulp');const jsHint = require('gulp-jshint');gulp.task('jsHint',function(){    gulp.src('./Home/js/templatehandle.js').     pipe(jsHint()).     pipe(jsHint.reporter())})；gulp.task('default',['jsHint']);在当前项目的命令行中键入 gulp

⑦动态刷新浏览器 需要包依赖browser-sync npm i --save-dev browser-sync

let gulp = require('gulp');let browser = require('browser-sync').create();gulp.task('noFlash',function(){    browser.init({        files:['./noFlash.html','./noFlash.css','./testProj.html','./testProj.css'],/*需要监听的文件*/        server:{            baseDir:'./Home'/*服务基础目录*/        }    })    gulp.watch("./Home/*.html").on('change', browser.reload);/*发生改变 则执行刷新*/    gulp.watch("./Home/*.css").on('change', browser.reload);/*发生改变 则执行刷新*/})gulp.task('default',['noFlash']); 在当前项目的命令行中键入 gulp

⑧合并且压缩js文件组合使用 需要包依赖gulp-concat || gulp-uglify npm i --save-dev gulp-concat

let gulp = require('gulp');let concat = require('gulp-concat');let minifyJS = require('gulp-uglify');gulp.task('concat',function(){    return gulp.src(['./Home/js/templatehandle.js','./Home/js/mc_js.js']).     pipe(concat('test.js')).     pipe(gulp.dest('dist'))})gulp.task('minifyJS',['concat'],function(){    return gulp.src('./dist/test.js').     pipe(minifyJS()).    pipe(gulp.dest('dist'))})gulp.task('default',['minifyJS'])在当前项目的命令行中键入 gulp

暂时写到这里 其实这里只是简略的介绍了gulp的使用 还有更多的细节需要切把控 然后还有一点没谈到的是如何在项目中加入使用gulp 前面说了由于公司项目没有采取自动化工程 所以我体会也不大 具体可以参考网上其他网友的文章