前端自动化gulp使用方法

gulp介绍

2. 特点

　　易于使用：通过代码优于配置的策略， Gulp 让简单的任务简单，复杂的任务可管理。
　　构建快速：利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
　　插件高质： Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
　　易于学习：通过最少的 API ，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

1.gulp安装

　　前提先安装 nodejs 环境然后在进行如下安装

npm install gulp -g 全局安装

npm install gulp --save-dev  安装依赖

如果安装不成功，借助cnpm

2. 初始化工程

1>、mkdir 文件夹名称

2>cd 文件夹名称

3> 创建 package.json 文件

　　手动创建或者命令创建
　　npm init 输入相关信息

4> 然后发现没有 gulp

　　这个时候就需要输入
　　npm install gulp --save-dev
　　然后出现一个 node_modules/ 文件夹

　　(2) 有配置文件的话
　　直接输入 npm install 就可以了

3. 创建任务

　　通过 gulpfile.js 去创建任务
　　在根目录下创建一个 gulpfile.js 的文件
　　在文件中写入以下内容

 　　　　var gulp = require('gulp');

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

 　　　　　　// 第一个参数是任务名称，第二个参数是任务功能

 　　　　　　console.log('hello world!');

 　　　　})

　　写完之后呢

　　在命令行中输入
　　gulp hello 命令执行输出 hello world ！

　　其他命令我们会在后面介绍
　　这里呢我们先介绍一个默认的任务

 　　gulp.task('default',function(){}) 他也有回调函数，但是呢，但是回调函数，我们可以通过数组来定义

 　　gulp.task('default',['hello',....]); 数组里放入我们定义的字符串

　　然后命令行中输入gulp 就可以执行了//例如上面输 gulp default

4.gulp 基础

　　gulp.src().pipe(gulp.dest())
　　gulp.src() 方法可以帮助我们找出将要处理的文件，然后 pipe() 去处理这些找到的文件。 pipe() 可以理解为管道，每个管道就可以指定它的功能，最后我们再使用 gulp.dest() 方法把处理好的文件放到指定的地方。

　　1>使用 gulp 来实现文件的 copy
首先在我们工程目录下新建一个测试使用的 index.html,然后写入相应的内容
在我们个 gulpfile.js 文件中输入以下内容

 　　var gulp =require('gulp');

 　　gulp.task('copy-index',function(){

 　　　　//gulp.src() 找到我们的 index.html 然后使用 .pipe() 通道

 　　　　//gulp.dist() 发布拷贝

 　　　　return gulp.src('index.html').pipe(gulp.dist('dist'));

 　　});

在我们的命令行中执行gulp copy-index 命令,然后去 dist 目录下验证

复制文件夹下所有jpg图片

 　　var gulp = require('gulp');

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

 　　　　return gulp.src('images/*.jpg').pipe(gulp.dest('dist/images'))

 　　});

　　*.jpg 所有格式为jpg的图片

下面再讲一下如何拷贝 images 下面文件夹以及文件夹下文件加入我们想要同时拷贝 jpg ， png 文件

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

　　　　return gulp.src('images/*.{jpg,png}').pipe(gulp.dest('dist/images'))

　　})

　　里面不要加空格，/**/* 当前文件夹下所有文件以及子文件下所有文件

两个文件夹同时拷贝到某一个文件夹下

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

 　　　　return gulp.src(['xml/*.xml','json/*.json']).pipe(gulp.dest('dist/data'));

 　　})

　　排除文件拷贝

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

 　　　　return gulp.src(['xml/*.xml','json/*.json' ， '!/json/secret.json']).pipe(gulp.dest('dist/data'));

 　　})

　　!/json/secret.json 排除某个文件

多个任务执行，将上述几个一起执行

 　　gulp.task('build',['copy-index','images','data'],function(){

 　　　　console.log(' 编译成功 ');

 　　})

　　命令行 gulp build 查看效果

2>侦测文件变化

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

 　　　　gulp.watch('index.html',['copy-index']);

 　　　　gulp.watch('images/**/*.{jpg,png}',['images']);

 　　　　gulp.watch(['xml/*.xml','json/*.json','!json/secret.json'],['data']);

 　　})

　　回到命令行执行 gulp watch

　　结束 ctrl + C
　　回到文件里面改变文件看下效果

5、gulp 插件使用

　　访问网站 http://gulpjs.com/plugins

1>、gulp 编译 less
　　命令行安装依赖

npm install gulp-less --save-dev

　　创建 less 文件，写入内容

　　在 gulpfile.js 文件中写入

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

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

 　　　　return gulp.src('stylesheet/**/*.less')

 　　　　.pipe(less());

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

 　　})

2>、gulp-connect 插件搭建本地服务

　　命令行安装

npm install gulp-connect --save-dev

　　在 gulpfile.js 文件中写入

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

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

 　　　　connect.server();

 　　})

　　启动服务：

　　命令行执行 gulp sever

修改文件后页面自动刷新

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

     //connect.server();

     //sever() 方法介绍

     // 配置文档根目录

     connect.server({

         root ： 'dist' ，

         livereload:true

     });

 })

然后在我们 copy 任务中添加

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

     return gulp.src('index.html').pipe(gulp.dest(''))

         .pipe(connect.reload());

 })

然后在 watch 中添加

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

     gulp.watch('index.html',['copy']);

 })

然后创建一个

 gulp.task('default',['server','watch']);

最后执行 gulp default 命令

验证修改文件看下浏览器中是否会自动刷新

3>、合并文件插件 gulp-concat

　　命令行安装 npm install gulp-concat --save-dev

在 gulpfile.js

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

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

     return gulp.src(['javascripts/avalon.js','javascripts/index.js'])

         .pipe(concat('vendor.js'))

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

 })

4>、将合并 js 文件进行压缩 gulp-uglify

命令行安装 npm install gulp-uglify --save-dev

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

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

     return gulp.src(['javascripts/avalon.js','javascripts/index.js'])

         .pipe(concat('vendor.js'))

         .pipe(uglify())//

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

     })

为了保留前后压缩两个文件
怎么做呢
安装 gulp-rename 插件

命令行安装 npm install gulp-rename --save-dev

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

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

         return gulp.src(['javascripts/avalon.js','javascripts/index.js'])

             .pipe(concat('vendor.js'))

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

             .pipe(uglify())

             .pipe(rename('vendor.min.js'))

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

     })

命令行执行 gulp scripts
验证是否生成两个文件

5>、如何压缩 css

命令行安装 npm install gulp-minify-css --save-dev

     var minifyCss = require('gulp-minify-css');

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

         return gulp.src('stylesheet/**/*.less')

             .pipe(less());

             .pipe(minifyCss())

             .pipe(uglify())

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

     })

6>、对图片进行压缩

安装插件 npm install gulp-imagemin --save-dev

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

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

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

             .pipe(imagemin())

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

     })

执行命令 gulp images

6>、监听文件，浏览器自动刷新

　　安装插件 npm install gulp-livereload --save-dev

 var less = require("gulp-less"); //less编译

 var livereload = require('gulp-livereload'); //自动刷新

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

     gulp.src('style/less/*.less') //less编译

         .pipe(less())

         .pipe(gulp.dest('style/css'))

         .pipe(livereload());

 });

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

     livereload.listen(); //要在这里调用listen()方法

     gulp.watch('style/less/*.less', ['compile-less']); //监听目录下的文件，若文件发生变化，则调用less任务。

     gulp.src('index.html')

         .pipe(livereload());

 });

 //当代码变化时，它可以帮助我们自动刷新页面，该插件最好配合谷歌浏览器，且要安装livereload chrome extension扩展插件，否则无效。

gulp 功能呢暂时讲到这里还有很多内容可以参考官网进行学习

更详细gulp入门地址 http://www.ydcss.com/archives/18

巴特西

前端自动化gulp使用方法

最新文章

热门文章