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