在这之前,我已经分享过一个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

创建项目的目录结构

  1. demo2
  2. -----dist
  3. -----src
  4. -css
  5. -img
  6. -js
  7. -----gulpfile.js
  8. -----package.json

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

  1. var Oper = {
  2. add : function( n1, n2 ){
  3. return n1 + n2;
  4. },
  5. sbb : function( n1, n2 ){
  6. return n1 - n2;
  7. }
  8. }

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

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

  1. var gulp = require( 'gulp' );
  2. var uglify = require( 'gulp-uglify' );
  3.  
  4. gulp.task('min-js', function() {
  5. gulp.src('src/js/*.js')
  6. .pipe( uglify() )
  7. .pipe( gulp.dest('dist/js') );
  8. });
  • gulp.task(name, fn) - 定义任务,第一个参数是任务名,第二个参数是任务内容。
  • gulp.src(path) - 选择文件,传入参数是文件路径。
  • gulp.dest(path) - 输出文件
  • gulp.pipe() - 管道,你可以暂时将 pipe 理解为将操作加入执行队列

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

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

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

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

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

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

二、压缩css文件

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

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

  1. html,body {
  2. margin:;
  3. padding:;
  4. }
  5. li {
  6. list-style-type:none;
  7. }
  8. a{
  9. text-decoration: none;
  10. color:#666;
  11. }

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

  1. var gulp = require( 'gulp' );
  2. var uglify = require( 'gulp-uglify' );
  3. var cleanCSS = require( 'gulp-clean-css' );
  4.  
  5. gulp.task('min-js', function() {
  6. gulp.src('src/js/*.js')
  7. .pipe( uglify() )
  8. .pipe( gulp.dest('dist/js') );
  9. });
  10.  
  11. gulp.task('min-css', function() {
  12. gulp.src('src/css/*.css')
  13. .pipe( cleanCSS() )
  14. .pipe( gulp.dest('dist/css') );
  15. });

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

  1. 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文件

  1. @c1 : green;
  2. @c2 : red;
  3. div {
  4. width:200px;
  5. height:200px;
  6. background:@c1;
  7. div {
  8. background:@c2;
  9. transition:all ease 1s;
  10. }
  11. }

gulpfile.js中添加任务:

  1. var gulp = require( 'gulp' );
  2. var uglify = require( 'gulp-uglify' );
  3. var cleanCSS = require( 'gulp-clean-css' );
  4. var less = require('gulp-less');
  5.  
  6. gulp.task('min-js', function() {
  7. gulp.src('src/js/*.js')
  8. .pipe( uglify() )
  9. .pipe( gulp.dest('dist/js') );
  10. });
  11.  
  12. gulp.task('min-css', function() {
  13. gulp.src('src/css/*.css')
  14. .pipe( cleanCSS() )
  15. .pipe( gulp.dest('dist/css') );
  16. });
  17.  
  18. gulp.task( 'compile-less', function(){
  19. gulp.src( 'src/css/*.less' )
  20. .pipe( less() )
  21. .pipe( gulp.dest( 'dist/less' ) );
  22. } );

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

  1. div {
  2. width: 200px;
  3. height: 200px;
  4. background: green;
  5. }
  6. div div {
  7. background: red;
  8. transition: all ease 1s;
  9. }

四、合并js文件

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

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

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

在gulpfile.js中新增任务:

  1. var gulp = require( 'gulp' );
  2. var uglify = require( 'gulp-uglify' );
  3. var cleanCSS = require( 'gulp-clean-css' );
  4. var less = require('gulp-less');
  5. var concat = require('gulp-concat');
  6.  
  7. gulp.task('min-js', function() {
  8. gulp.src('src/js/*.js')
  9. .pipe( uglify() )
  10. .pipe( gulp.dest('dist/js') );
  11. });
  12.  
  13. gulp.task( 'concat-file', function(){
  14. gulp.src( 'src/js/*.js' )
  15. .pipe( concat('all.min.js') )
  16. .pipe( uglify() )
  17. .pipe( gulp.dest( 'dist/js' ) );
  18. } );
  19.  
  20. gulp.task('min-css', function() {
  21. gulp.src('src/css/*.css')
  22. .pipe( cleanCSS() )
  23. .pipe( gulp.dest('dist/css') );
  24. });
  25.  
  26. gulp.task( 'compile-less', function(){
  27. gulp.src( 'src/css/*.less' )
  28. .pipe( less() )
  29. .pipe( gulp.dest( 'dist/less' ) );
  30. } );

执行任务:gulp concat-file

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

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

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

  1. gulp.task( 'auto', function(){
  2. gulp.watch( 'src/js/*.js', ['min-js'] );
  3. gulp.watch( 'src/css/*.css', ['min-css'] );
  4. } );
  5. 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. NYOJ--122--Triangular Sums

    Triangular Sums 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 The nth Triangular number, T(n) = 1 + - + n ...

  2. 27. Remove Element【leetcode】

    27. Remove Element[leetcode] Given an array and a value, remove all instances of that value in place ...

  3. Loadrunner错误 -27727: 下载资源时步骤下载超时 (120 seconds) 已过期

    由于压力大了,下载资源所用时间就长了,可以设置加大超时时间 运行时设置 Internet 协议--首选项--高级--选项 --General--步骤下载超时(秒) 把这个值从120改为更大,如300, ...

  4. Modelsim调用用do脚本自动化仿真

    前言 EDA发展的趋势是自动化,使用脚本自动化仿真可以减少不必要的时间浪费. 流程 在windows下新建批处理脚本bat文件(linux下可用shell脚本或者其他,注意给脚本运行权限即可:chmo ...

  5. python学习===复制list

    """将一个列表的数据复制到另一个列表中.""" """ 使用[:] """ a ...

  6. Linux - 简明Shell编程11 - 调用脚本(CallTheScript)

    脚本地址 https://github.com/anliven/L-Shell/tree/master/Shell-Basics 示例脚本及注释 主脚本: CallTheScript.sh #!/bi ...

  7. python——序列 & 集合 & 映射

    列表 & 元组 & 字典 & 集合 序列 序列: 每个元素可以是任何类型(也可以是序列),每个元素被分配一个序号(从0开始)(序号,也叫索引,表示元素的位置) Python中的 ...

  8. Mahout安装部署

    0x01 简介 Mahout 是一套具有可扩充能力的机器学习类库.它提供机器学习框架的同时,还实现了一些可扩展的机器学习领域经典算法的实现,可以帮助开发人员更加方便快捷地创建智能应用程序.通过和 Ap ...

  9. sqlite 的基本使用3

    AND 运算符和OR运算符 这两个运算符一般被称为连接运算符,用来缩小sqlite所选的数据 AND 运算符是当所有的条件都为真时,表达式才为真 sqlite and name = "bb& ...

  10. 在 WebSphere Application Server V7 集群环境中管理 HTTP session[阅读]

    http://www.ibm.com/developerworks/cn/websphere/library/techarticles/1012_dingsj_wascluster/1012_ding ...