自动化构建工具gulp简单介绍及使用

一、简介及安装：

　　gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率

gulp的优点：基于流的操作、任务化。

常用api：src 、dest、watch、task、pipe

由于gulp是基于node的所以使用的时候需要通过npm或者cnpm安装全局安装（cnpm i -g gulp）

常用的gulp需要安装的包括gulp-clean gulp-connect gulp-concat gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-uglify open

安装以上的gulp插件可以使用cnpm i --save-dev xxx(--save-dev可以使安装的插件的依赖保存在package.json中),同时有一种快捷的方式可以一次性安装多个，每个组件之间使用空格隔开cnpm i --save-dev gulp-concat gulp-connect等

安装完以上插件，package.json的文件会添加下面的依赖。

二、使用

　　首先需要创建一个gulpfile.js文件，使用require引入gulp模块，同时引入gulp-load-plugins模块（引入该模块的目的是为了当以后想要引入gulp-connect等插件的时候，可以通过$直接引入，这样比较方便）

下面结合具体的实例对以上进行说明：（具体的已经给出注释说明）

 var gulp = require('gulp');

 //引入gulp-load-plugins模块 注意要将其实例化

 var $ = require('gulp-load-plugins')();

 var open = require('open');

 var app = {

   srcPath: 'src/',

   devPath: 'build/',

   prdPath: 'dist/'

 };

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

   gulp.src('bower_components/**/*.js')//读取文件目录

   .pipe(gulp.dest(app.devPath + 'vendor'))//写入目录

   .pipe(gulp.dest(app.prdPath + 'vendor'))

   .pipe($.connect.reload());//重新刷新浏览器

 });

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

   gulp.src(app.srcPath + '**/*.html')

   .pipe(gulp.dest(app.devPath))

   .pipe(gulp.dest(app.prdPath))

   .pipe($.connect.reload());

 })

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

   gulp.src(app.srcPath + 'data/**/*.json')

   .pipe(gulp.dest(app.devPath + 'data'))

   .pipe(gulp.dest(app.prdPath + 'data'))

   .pipe($.connect.reload());

 });

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

   gulp.src(app.srcPath + 'style/index.less')

   .pipe($.plumber())

   .pipe($.less())//编译less文件

   .pipe(gulp.dest(app.devPath + 'css'))

   .pipe($.cssmin())//压缩css文件

   .pipe(gulp.dest(app.prdPath + 'css'))

   .pipe($.connect.reload());

 });

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

   gulp.src(app.srcPath + 'script/**/*.js')

   .pipe($.plumber())

   .pipe($.concat('index.js'))//将js文件合并到index.js文件中

   .pipe(gulp.dest(app.devPath + 'js'))

   .pipe($.uglify())//压缩js文件

   .pipe(gulp.dest(app.prdPath + 'js'))

   .pipe($.connect.reload());

 });

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

   gulp.src(app.srcPath + 'image/**/*')

   //捕获处理任务中的错误

   .pipe($.plumber())

   .pipe(gulp.dest(app.devPath + 'image'))

   .pipe($.imagemin())//压缩图片文件

   .pipe(gulp.dest(app.prdPath + 'image'))

   .pipe($.connect.reload());

 });

 //总的任务

 gulp.task('build', ['image', 'js', 'less', 'lib', 'html', 'json']);

 //清除目录中的内容

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

   gulp.src([app.devPath, app.prdPath])

   .pipe($.clean());

 });

 gulp.task('serve', ['build'], function() {

   $.connect.server({

     root: [app.devPath],//读取路径

     livereload: true,//自动刷新

     port: 3000

   });

   //打开默认地址

   open('http://localhost:3000');

   //监控文件 当变化时执行相对应的任务

   gulp.watch('bower_components/**/*', ['lib']);

   gulp.watch(app.srcPath + '**/*.html', ['html']);

   gulp.watch(app.srcPath + 'data/**/*.json', ['json']);

   gulp.watch(app.srcPath + 'style/**/*.less', ['less']);

   gulp.watch(app.srcPath + 'script/**/*.js', ['js']);

   gulp.watch(app.srcPath + 'image/**/*', ['image']);

 });

 gulp.task('default', ['serve']);

由于刚开通博客，不怎么会排版，写得知识也只是个人理解，如果问题请指出。希望大神们多多指教。

巴特西

自动化构建工具gulp简单介绍及使用

最新文章

热门文章