gulp前端自动化

前言

gulp的运行依赖与node.js，所以需保证node.js已经安装，node.js的下载地址https://nodejs.org/en/ ,

如下操做在windows环境下完成，在其余操做系统其实也是类似的

一，安装gulp

cmd进入命令行输入命令：

npm install -g gulp  //-g表示全局安装

作项目依赖安装

npm install --save-dev gulp

二，gulp使用 

1.新建js项目，例如：gulpTest

(1)初识gulp使用

在gulpTest根目录下建立gulpfile.js文件，而后在gulpfile.js输入如下代码

var gulp = require('gulp');
gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

gulpfile.js其实就是gulp运行构建的执行文件

在命令行执行：cd gulpTest 而后执行gulp便可

(2).使用gulp压缩js文件

接着在gulpTest项目目录下新建一个目录js,而后在js目录下建立一个app.js的文件并在该文件中写入以下代码

function sayHello(){
	console.log("hello");
}

打开gulpfile.js文件修改下里面的内容

var gulp = require('gulp');//加载gulp模块
uglify = require('gulp-uglify');//加载gulp-uglify压缩模块
gulp.task('minify', function () {//自定一个名为minify的gulp任务
   gulp.src('js/app.js')//载入js文件为对象流
      .pipe(uglify())//经过管道将对象流传递给uplify()方法获得压缩后的文件对象流
      .pipe(gulp.dest('build'))//将压缩后的文件对象流经过管道传递给gulp.test()方法输出压缩后的文件
});

而后在命令行执行：

npm install --save-dev gulp-uglify

gulp minify//任务名须要和本身定义的同样，不然会出错

执行完后会发如今gulp在gulpTest的根目录下建立了一个build的文件夹同时也将压缩后app.js文件输出到build文件夹中

(3)使用gulp合并压缩多个js文件

继续上面的例子。在js文件夹下新建一个js文件app2.js并在在里面输入代码

function sayWorld(){
	console.log("world");
}

接下来在gulpfile.js文件中加入一个新的gulp任务名为js

var gulp = require('gulp');
    uglify = require('gulp-uglify');//加载压缩插件
    jshint = require('gulp-jshint'),//加载js代码验证插件jshint
    concat = require('gulp-concat');//加载代码合并插件concat
    rename = require('gulp-rename');//加载rename插件
gulp.task('default', function() {
  //dosome thing
});
//按js文件原名压缩输出
gulp.task('default', function () {
   gulp.src('js/*.js')
      .pipe(uglify())
      //压缩重命名，例如me.js压缩后变为me.min.js，不须要可注释掉
      .pipe(rename({suffix: '.min'}))
      .pipe(gulp.dest('build'))
});
//指定base后按源码原路径输出
gulp.src('src/js/**/*.js', { base: 'src' })
  .pipe(minify())
  .pipe(gulp.dest('build'));  // Writes 'build/js/somedir/somefile.js'
});
gulp.task('minify', function () {
   gulp.src('js/app.js')
      .pipe(uglify())
      .pipe(gulp.dest('build'))
});
gulp.task('js', function () {
   return gulp.src('js/*.js')//通配符匹配js文件下的全部js文件
      .pipe(jshint())
      .pipe(jshint.reporter('default'))//输出js代码验证信息
      .pipe(uglify())
      .pipe(concat('app.js'))//将代码合并压缩到app.js中文件中
      .pipe(gulp.dest('build'));//将压缩合并的app.js输出到build文件夹
});

在命令行输入：

安装插件

npm install --save-dev

gulp js//执行js任务

执行成功后会js目录下app.js和app2.js合并压缩到build下的app.js中

三，gulp.src()方法文件匹配实例

(1)匹配具体文件

js/app.js

(2)匹配某一文件夹全部文件

js/*.js //匹配js文件夹下全部.js结尾的文件

(3)匹配某一文件加下的js文件包括其子目录

js/**/*.js

(4)不匹配指定的js文件

!js/app.js  //不匹配js文件夹中的app.js文件

(5)匹配多种文件

*.+(js|css)

(6)gulp.src多条件匹配

gulp.src(['js/**/*.js', '!js/**/*.min.js'])

四，gulp任务定义实例

(1)任务中执行其余任务

gulp.task('build', ['css', 'js', 'imgs']);//经过build任务去执行gulp的css,js,imgs任务

(2)任务的前后顺序

执行：gulp css时会等待greet任务执行完成再执行css任务

gulp.task('css', ['greet'], function () {
   //greet任务完成，干本身想干的事
});

五,gulp插件管理优化

前面的第二，三小节中在加载插件时一般在gulpfile.js的文件头部写入如下相似代码

var gulp = require('gulp');
    uglify = require('gulp-uglify');//加载压缩插件
    jshint = require('gulp-jshint'),//加载js验证插件
    concat = require('gulp-concat');//加载代码合并插件

在上面代码中实际上jshint被加载了两次，第一次运行时jshint只是给文件对象附加了jshint属性没有输出任何的检查信息而已，但后后面的

jsheet也是必须的，要解决这个问题可使用一个叫gulp-load-plugins插件，它能够用来加载全部的gulp插件

注意：gulp-load-plugins会去掉被加载插件名的gulp前缀和'-',而且会采用驼峰命名规则对插件重命名，例如：gulp-ray-sass会被重命名为raySass

下面开始体验使用gulp-load-plugins插件来加载gulp插件

(1)修改gulpfile.js,修改后代码以下

var gulp = require('gulp');
    gulpLoadPlugins = require('gulp-load-plugins'),//经过gulp-load-plugins加载插件
    plugins = gulpLoadPlugins();
gulp.task('default', function() {
  //do something
});
gulp.task('minify', function () {
   gulp.src('js/app.js')
      .pipe(uglify())
      .pipe(gulp.dest('build'))
});
gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(plugins.jshint())
      .pipe(plugins.jshint.reporter('default'))
      .pipe(plugins.uglify())
      .pipe(plugins.concat('app.js'))
      .pipe(gulp.dest('build'));
});

(2)在项目gulpTest根目录先新建一个package.json的文件，并在文件中输入如下内容

文件里其实就是定义项目依赖的插件，这样gulp-load-plugins就会自动根据package.json去加载所需插件

不知道版本号全使用最新

{
   "devDependencies": {
      "gulp-concat": "",
      "gulp-uglify": "",
      "gulp-jshint": "",
      "gulp-load-plugins": "",
      "jshint":"",
      "gulp": ""
   }
}

 

而后运行：

npm install --save-dev

gulp js

一样输出压缩后的js