gulp教程_从入门到项目中快速上手使用方法

gulp是什么?

gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率。在 Web 前端开发工作中有很多“重复工作”,比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”

一、安装gulp与压缩js文件

命令:

npm install gulp -g

npm install gulp --save-dev

初始化项目package.json的配置:npm init --yes

创建项目的目录结构

 demo2
 -----dist
 -----src
     -css
     -img
     -js
 -----gulpfile.js
 -----package.json

在js目录下新建文件( lib.js )

 var Oper = {
   add : function( n1, n2 ){
     return n1 + n2;
   },
   sbb : function( n1, n2 ){
     return n1 - n2;
   }
 }

安装压缩js的插件: npm install gulp-uglify --save-dev,

然后在gulpfile.js中,输入任务处理代码

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

 gulp.task('min-js', function() {
   gulp.src('src/js/*.js')
     .pipe( uglify() )
     .pipe( gulp.dest('dist/js') );
 });

gulp.task(name, fn) - 定义任务,第一个参数是任务名,第二个参数是任务内容。

gulp.src(path) - 选择文件,传入参数是文件路径。

gulp.dest(path) - 输出文件

gulp.pipe() - 管道,你可以暂时将 pipe 理解为将操作加入执行队列

在命令行执行任务: gulp min-js

就会在 dist/js/lib.js 生成压缩文件

var Oper={add:function(n,r){return n+r},sbb:function(n,r){return n-r}};

在demo2目录下创建index.html,输入以下测试代码

 <script src="./dist/js/lib.js"></script>
   <script>
     alert( Oper.add( 100, 200 ) );
   </script>

发现压缩好的lib.js文件是可以正常使用的

二、压缩css文件

安装插件: npm install gulp-clean-css --save-dev

demo2/src/css下新建文件style.css

html,body {
  margin:0;
  padding:0;
}
li {
  list-style-type:none;
}
a{
  text-decoration: none;
  color:#666;
}

在gulpfile.js文件中添加压缩css的任务

var gulp = require( 'gulp' );
var uglify = require( 'gulp-uglify' );
var cleanCSS = require( 'gulp-clean-css' );

gulp.task('min-js', function() {
  gulp.src('src/js/*.js')
    .pipe( uglify() )
    .pipe( gulp.dest('dist/js') );
});

gulp.task('min-css', function() {
  gulp.src('src/css/*.css')
    .pipe( cleanCSS() )
    .pipe( gulp.dest('dist/css') );
});

然后在命令行执行gulp min-css任务 就会在dist/css生成style.css压缩文件

 body,html{margin:0;padding:0}li{list-style-type:none}a{text-decoration:none;color:#666}

三、编译less文件

安装插件:npm install gulp-less --save-dev

在src/css下面新建style.less文件

@c1 : green;
@c2 : red;
div {
  width:200px;
  height:200px;
  background:@c1;
  div {
    background:@c2;
    transition:all ease 1s;
  }
}

gulpfile.js中添加任务:

var gulp = require( 'gulp' );
var uglify = require( 'gulp-uglify' );
var cleanCSS = require( 'gulp-clean-css' );
var less = require('gulp-less');

gulp.task('min-js', function() {
  gulp.src('src/js/*.js')
    .pipe( uglify() )
    .pipe( gulp.dest('dist/js') );
});

gulp.task('min-css', function() {
  gulp.src('src/css/*.css')
    .pipe( cleanCSS() )
    .pipe( gulp.dest('dist/css') );
});

gulp.task( 'compile-less', function(){
  gulp.src( 'src/css/*.less' )
    .pipe( less() )
    .pipe( gulp.dest( 'dist/less' ) );
} );

执行任务: gulp compile-less,在dist/less中生成style.css文件

 div {
  width: 200px;
  height: 200px;
  background: green;
 }
 div div {
  background: red;
  transition: all ease 1s;
 }

四、合并js文件

安装插件:npm install gulp-concat --save-dev

demo2/src/js新建lib2.js文件:

 function $( id ){
   return document.getElementById( id );
 }

在gulpfile.js中新增任务:

var gulp = require( 'gulp' );
var uglify = require( 'gulp-uglify' );
var cleanCSS = require( 'gulp-clean-css' );
var less = require('gulp-less');
var concat = require('gulp-concat');

gulp.task('min-js', function() {
  gulp.src('src/js/*.js')
    .pipe( uglify() )
    .pipe( gulp.dest('dist/js') );
});

gulp.task( 'concat-file', function(){
  gulp.src( 'src/js/*.js' )
    .pipe( concat('all.min.js') )
    .pipe( uglify() )
    .pipe( gulp.dest( 'dist/js' ) );
} );

gulp.task('min-css', function() {
  gulp.src('src/css/*.css')
    .pipe( cleanCSS() )
    .pipe( gulp.dest('dist/css') );
});

gulp.task( 'compile-less', function(){
  gulp.src( 'src/css/*.less' )
    .pipe( less() )
    .pipe( gulp.dest( 'dist/less' ) );
} );

执行任务:gulp concat-file

在dist/js下面生成all.min.js文件

 function $(n){return document.getElementById(n)}var Oper={add:function(n,t){return n+t},sbb:function(n,t){return n-t}};

五、自动监测文件变化,执行任务

 gulp.task( 'auto', function(){
   gulp.watch( 'src/js/*.js', ['min-js'] );
   gulp.watch( 'src/css/*.css', ['min-css'] );
 } );
 gulp.task( 'default', ['auto'] );

这里添加了一个默认任务default: 执行auto任务,auto里面自动监测压缩js和压缩css任务

在命令行直接执行gulp.

要执行其他任务,只需要按照这几步就可以了:

1,安装相应的插件

2,添加相应的任务

3,执行任务

以上这篇gulp教程_从入门到项目中快速上手使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2017-09-11

前端构建工具之gulp的语法教程

前言 上一篇说了下gulp的环境搭建以及配置,这一篇说说gulp的语法. 语法说来其实很简单,主要有以下4种: gulp四种语法 现在我们把src下面的index.html文件copy到发布文件夹dist下: 复制单个文件 webstorm下运行 . 点击运行 如此,便有: dist文件夹下更新 复制多个文件 复制到某个特定的文件夹下 每次运行之前都需要更新一下 最终 复制指定文件 排除某个文件 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家

前端构建工具之gulp的配置与搭建详解

前言 在如今的前端开发中,已经不再是一些静态文件了. 对于很多Web App来说,前端代码甚至比后端更加复杂,更加难以管理,这主要来源于一下几个方面: 1.许多第三方库的依赖需要自动运行 2.独立的前端测试需要自动运行 3.代码需要发布时打包 一.为什么要使用gulp? 在我们的工作流程里,应该尽量减少重复的工作,很多任务都可以自动去执行,比如一些相关文件的操作,自动监视一些文件的变化,发生变化以后,就去执行事先设计好的任务. 说了这么多,那么gulp到底能做什么? a.创建项目工程 b.压缩各

详解前端构建工具gulpjs的使用介绍及技巧

gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次

Ruby中任务构建工具rake的入门学习教程

Rake简介 Rake的意思是Ruby Make,一个用ruby开发的代码构建工具. 但是,为什么Ruby需要Rake? 按理说Ruby代码无需编译,应该不需要Rake才对呀?原来,Rake另有妙用,即把Rake当做一个任务管理工具来使用...这样做有两个好处: 1.以任务的方式创建和运行脚本 当然,你可以用脚本来创建每一个你希望自动运行的任务.但是,对于大型的应用来说,你几乎总是需要为数据库迁移(比如Rails中db:migrate任务).清空缓存.或者代码维护等等编写脚本.对于每一项任务,你

基于Node.js的JavaScript项目构建工具gulp的使用教程

npm install gulp --save-dev 什么是gulp? gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习. gulp 使用 stream 方式处理内容.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等. gulp和grunt的异同点 易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变

详解前端自动化工具gulp自动添加版本号

之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时在更新css或js时老是在客户端存在缓存导致更新后的效果无法实时展现的苦恼.所以就赶紧去试了一下,果真可以,很高兴啊,真是为项目开发,为效果的快速展现提供了很多的便利. 实现原理: 1.修改js和css文件: 2.通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件

基于Bootstrap和jQuery构建前端分页工具实例代码

前言 为啥名字叫[前端分页工具]?因为我实在想不到什么好名字,如果想要更加贴切的理解这个工具,应该从业务来看 业务是这样的,有一个数据从后台传到前台,因为数据量不大,因此传过来之后直接显示即可,但是=.=所谓的数据量不大,最多也达到成百上千条,不可能全部显示出来,那么就需要分页 常规的分页是利用Ajax,通过传页偏移量到后台,后台查询数据库再返回数据,可以实现无刷新分页,拿到的数据也是最新的 前端分页 优点:一次传输数据,避免用户反复请求服务器,减少网络带宽.服务器调度压力.数据库查询.缓存查询

Java的项目构建工具Maven的配置和使用教程

一.Maven是什么 Maven是一个用java开发的项目构建工具, 它能使项目构建过程中的编译.测试.发布.文档自动化, 大大减轻了程序员部署负担. 二.安装Maven 安装maven非常简单,访问Maven官方页下载即可:http://maven.apache.org/download.cgi 下载完后配置M2_HOME环境变量, 然后终端运行mvn --version, 看到正确的输出提示,Maven就安装完成了. 三.Maven基本概念 Maven的核心思想是POM, 即Project

前端构建 Less入门(CSS预处理器)

Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. Less 可以运行在 Node.浏览器和 Rhino 平台上.网上有很多第三方工具帮助你编译 Less 源码. 一.前言 说到前端构建怎能缺少CSS预处理器呢!其实CSS的预处理器有很多啦,比较出名的有Scss.Sass.Stylus和Less.(最近还听说出现了Autoprefixer等CSS后处理器,可参考@一丝的PPT) 众多CSS预处理

Visual Studio 2010 前端开发工具/扩展/插件推荐

怎么样让Visual Studio更好地编写HTML5, CSS3, JavaScript, jQuery,换句话说就是如何更好地做前端开发.Visual Studio 2010不管是旗舰版还是免费版都没有对前端开发方面做充分的优化.不要希望VS默认安装这些东西,我们有很多VS的扩展可是使用. 这里列出的大多数扩展都可以使用Extension Manager (Tools > Extension Manager)来安装,你可以通过Visual Studio Gallery网站下载这些扩展. We