在这之前,我已经分享过一个webpack的全系列,相对于webpack, 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:;
padding:;
}
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:;padding:}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,执行任务

[js高手之路]gulp教程-从入门到项目中快速上手使用的更多相关文章

  1. [js高手之路] es6系列教程 - 对象功能扩展详解

    第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...

  2. [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)

    上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他 ...

  3. [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

    上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置 一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意 ...

  4. [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

    还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.htm ...

  5. [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

    本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...

  6. [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法

    什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loade ...

  7. [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法

    我们还是接着上文继续,本文我们要讲的是图片资源的打包,图片在静态排版中,经常出现的两个位置是css通过background引入背景,还有一种就是在html模板文件中用img标签引入的方式,如果要在we ...

  8. [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法

    我们接着上文,那么在上篇文章的最后,写到了css-loader的用法,如果你用心发现,就能看到我在style.css样式文件中写了一个这样的样式: div { transition: all ease ...

  9. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

随机推荐

  1. 15. leetcode 349. Intersection of Two Arrays

    Given two arrays, write a function to compute their intersection. Example: Given nums1 = [1, 2, 2, 1 ...

  2. Shell排序

    public void shellSort(int[] array) { int increment = array.length; do { increment = increment / 2; / ...

  3. ida和idr机制分析(盘符分配机制)

    # ida和idr机制分析 ida和idr的机制在我个人看来,是内核管理整数资源的一种方法.在内核中,许多地方都用到了该结构(例如class的id,disk的id),更直观的说,硬盘的sda到sdz的 ...

  4. 带有WS-Security验证的webservice

    示例用的是spring+CXF来配置webservice 首先是web.xml配置,将spring,CXF的配置文件加载进去,由于我客户端跟服务端在同一个工程里面,所以配置文件在一块. <con ...

  5. 纯Css绘制三角形箭头三种方法

    在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...

  6. django开发者模式中的autoreload是怎样实现的

    在开发django应用的过程中,使用开发者模式启动服务是特别方便的一件事,只需要 python manage.py runserver 就可以运行服务,并且提供了非常人性化的autoreload机制, ...

  7. 17个新手常见Python运行时错误

    当初学 Python 时,想要弄懂 Python 的错误信息的含义可能有点复杂.这里列出了常见的的一些让你程序 crash 的运行时错误. 1)忘记在 if , elif , else , for , ...

  8. 一些方便的bash命令

    1.文件名大小写转换: (1)大写转小写: ls | awk '{printf("mv %s %s\n", $0, tolower($0))|"sh"}' (2 ...

  9. .net项目架构改造之搭建基于java环境配置一览【上】

    最近公司做了一个项目,需要嵌套在千牛的客户端上,项目代码必须上阿里的聚石塔,全程采用基于docker的自动化部署,我们的项目是基于.net架构.很遗憾 的是基于windows的docker上部署在访问 ...

  10. LINQ to Entities 中的查询

    MSDN地址:https://msdn.microsoft.com/zh-cn/library/bb399367%28v=vs.100%29.aspx .NET Framework 4 查询是一种从数 ...