自动化前端构建工具--gulp

Gulp是一个基于任务的javascript工程命令行流式构建工具。为什么要用Gulp呢？前端开发进入到工程化阶段，我们需要压缩合并文件，加MD5戳；如果使用 CoffeeScript/ES6 去代替 Javascript，那么需要编译成jacascript；如果使用less或者sass，需要编译成css。所有的这些操作，在修改文件后，都要重新执行一遍，非常的繁琐。Gulp就是为我们完成这一套重复而机械的工作的。他可以在自动检测文件，每次发生修改，自动编译打包等。

下面介绍用法。

首先安装gulp。在桌面新建一个文件夹，进入文件夹中执行npm init。默认安装即可。这样帮我们快速构建一个工程。

C:\Users\Admin>cd Desktop

C:\Users\Admin\Desktop>mkdir gulpTest

C:\Users\Admin\Desktop>cd gulpTest

C:\Users\Admin\Desktop\gulpTest>npm init

然后在工程目录下安装我们需要的插件：

C:\Users\Admin\Desktop\gulpTest>npm install gulp gulp-sass gulp-autoprefixer browser-sync --save-dev

browser-sync插件可以帮助我们自动刷新浏览器。

安装完成后，在gulpTest文件夹下新建一个文件夹app，存放我们的html等，然后在新建一个文件gulpfile.js。

接下来就是重点gulpfile怎么写了，首先先引入插件：

var gulp = require('gulp');

var sass = require('gulp-sass');

var browserSync = require('browser-sync');

var autoperfixer = require('gulp-autoperfixer');

然后建一个browserSync的reload实例：

var reload = browserSync.reload;

接下来就可以编写任务了，举个例子，修改文件后自动编译less/sass：

//less编译任务

gulp.task('less', function() {   //创建一个gulp任务，任务名字是'less'，然后一个回调函数

    return gulp.src(paths)　　　　//gulp任务操作的源文件'paths'

           .pipe(less())         //执行less编译

           .pipe(gulp.dest('./css'));  //gulp任务输出的新文件

});

//watch监听任务

gulp.task('watch', function(){   //创建第二个gulp任务，任务名字是‘watch',然后一个回调函数

    gulp.watch(paths,['less']);  //gulp的watch监听，文件改动后立即重新执行less任务 可参考http://www.gulpjs.com.cn/docs/api/

});

//gulp.watch('default',['less']);

gulp.task('default', ['less','watch']);　　//gulp的default任务，相当于glup的执行入口。然后把less任务和watch放进来，该脚本就会执行这两个任务

下面直接贴几个task代码：

一、压缩css

var minifycss = require('gulp-minify-css');//引用插件，需npm install --save-dev gulp-minify-css

gulp.task('minifycss', function() {

return gulp.src('src/css/*.css') //压缩的文件

.pipe(minifycss()) //执行压缩

.pipe(gulp.dest('dst/css')); //输出文件夹

});

二、压缩js

var concat = require('gulp-concat'),

    uglify = require('gulp-uglify'),

    rename = require('gulp-rename');　　//引用插件，需npm install --save-dev xxxxxx

gulp.task('minifyjs', function() {

    return gulp.src('src/*.js')　　//操作的源文件

        .pipe(concat('main.js'))    //合并所有js到main.js

        .pipe(gulp.dest('minified/js'))    //输出main.js到文件夹

        .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名

        .pipe(uglify())    //压缩

        .pipe(gulp.dest('minified/js'));  //输出

});

三、清空输出目录

var del =require('del');
gulp.task('clean', function() {

  return del(['dst']);　　//'dst'是一个目录

});

四、压缩图片

const imagemin = require('gulp-imagemin');

gulp.task('default', function(){

    return gulp.src('src/images/*')

           .pipe(imagemin())

           .pipe(gulp.dest('dist/images'));

});

五、压缩html

var gulp = require('gulp'),

    htmlmin = require('gulp-htmlmin');

gulp.task('htmlMin', function () {

    var options = {

        removeComments: true,//清除HTML注释

        collapseWhitespace: true,//压缩HTML

        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />

        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />

        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"

        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"

        minifyJS: true,//压缩页面JS

        minifyCSS: true//压缩页面CSS

    };

    gulp.src('src/*.html')

        .pipe(htmlmin(options))

        .pipe(gulp.dest('dst'));

});

六、合并文件

var concat = require('gulp-concat');

gulp.task('concat', function () {

    gulp.src('src/js/*.js')

        .pipe(concat('all.js'))//合并后的文件名

        .pipe(gulp.dest('dist/js'));

});

七、css自动处理浏览器前缀,如添加-webkit-解决浏览器兼容问题

var autoprefixer = require('gulp-autoprefixer');

gulp.task('autoprefixer', function () {

    gulp.src('css/index.css')

        .pipe(autoprefixer())

        .pipe(gulp.dest('dist/css'));

});

 八、给文件加上MD5戳

var rev = require('gulp-rev');

gulp.task('rev', function() {

    return gulp.src([config.src + config.resource])

        .pipe(rev())　　　　　　　　//加上MD5戳

        .pipe(gulp.dest(config.app))//输出文件

        .pipe(rev.manifest())//生成rev-manifest.json，该文件用于替换HTML CSS文件中引用的MD5文件路径

        .pipe(gulp.dest(config.rev))//rev-manifest.json文件放在rev目录下

});

九、给html css文件替换路径

var revCollector = require('gulp-rev-collector');

gulp.task('revCollector', function() {

    return gulp.src(['rev/*.json', 'config/*.css','config/*.html']) //读取 rev-manifest.json 文件以及需要进行文件名替换的文件

        .pipe(revCollector({

            replaceReved: true

        })) //执行文件内引用名的替换

        .pipe(gulp.dest('config/app')); //替换后的文件输出的目录

});

十、修改文件后自动刷新浏览器

browserSync = require('browser-sync');

var reload = browserSync.reload;

gulp.task('watch',function(){

    browserSync({

        server:{

            baseDir:'./src'　　//设置项目根目录，由此启动一个服务器

        }

    });

    gulp.watch('src/*.html',reload);//监听html文件，文件变动马上自动刷新浏览器页面

});

当设定的文件发生变动时，会自动启动一个本地服务器localhost:3000,然后读取baseDir中的目录。

如果你的文件就在服务器里，代码需要修改成这样

// 代理

gulp.task('watch', function() {

    browserSync.init({

        proxy: "你的域名或IP"

    });

　　gulp.watch('src/*.html',reload);//监听html文件，文件变动马上自动刷新浏览器页面

});

以及几个gulp命令：

gulp.task(name, fn)//新建一个gulp任务，name是任务名，fn回调函数

gulp.run(tasks...)//尽可能多的并行运行多个task 新版本中的gulp中使用run会发出警告，这样的情况下我们可以用start代替

gulp.watch(glob, fn//)当glob内容发生改变时，执行fn

gulp.src(glob)//返回一个可读的stream

gulp.dest(glob)//返回一个可写的stream

编写完gulpfile之后就可以在cmd执行gulp来完成命令了。

ending~

巴特西

自动化前端构建工具--gulp

最新文章

热门文章