[js高手之路]gulp教程-从入门到项目中快速上手使用
在这之前,我已经分享过一个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教程-从入门到项目中快速上手使用的更多相关文章
- [js高手之路] es6系列教程 - 对象功能扩展详解
第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他 ...
- [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)
上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置 一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意 ...
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.htm ...
- [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...
- [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loade ...
- [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
我们还是接着上文继续,本文我们要讲的是图片资源的打包,图片在静态排版中,经常出现的两个位置是css通过background引入背景,还有一种就是在html模板文件中用img标签引入的方式,如果要在we ...
- [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
我们接着上文,那么在上篇文章的最后,写到了css-loader的用法,如果你用心发现,就能看到我在style.css样式文件中写了一个这样的样式: div { transition: all ease ...
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
随机推荐
- NYOJ--122--Triangular Sums
Triangular Sums 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述 The nth Triangular number, T(n) = 1 + - + n ...
- 27. Remove Element【leetcode】
27. Remove Element[leetcode] Given an array and a value, remove all instances of that value in place ...
- Loadrunner错误 -27727: 下载资源时步骤下载超时 (120 seconds) 已过期
由于压力大了,下载资源所用时间就长了,可以设置加大超时时间 运行时设置 Internet 协议--首选项--高级--选项 --General--步骤下载超时(秒) 把这个值从120改为更大,如300, ...
- Modelsim调用用do脚本自动化仿真
前言 EDA发展的趋势是自动化,使用脚本自动化仿真可以减少不必要的时间浪费. 流程 在windows下新建批处理脚本bat文件(linux下可用shell脚本或者其他,注意给脚本运行权限即可:chmo ...
- python学习===复制list
"""将一个列表的数据复制到另一个列表中.""" """ 使用[:] """ a ...
- Linux - 简明Shell编程11 - 调用脚本(CallTheScript)
脚本地址 https://github.com/anliven/L-Shell/tree/master/Shell-Basics 示例脚本及注释 主脚本: CallTheScript.sh #!/bi ...
- python——序列 & 集合 & 映射
列表 & 元组 & 字典 & 集合 序列 序列: 每个元素可以是任何类型(也可以是序列),每个元素被分配一个序号(从0开始)(序号,也叫索引,表示元素的位置) Python中的 ...
- Mahout安装部署
0x01 简介 Mahout 是一套具有可扩充能力的机器学习类库.它提供机器学习框架的同时,还实现了一些可扩展的机器学习领域经典算法的实现,可以帮助开发人员更加方便快捷地创建智能应用程序.通过和 Ap ...
- sqlite 的基本使用3
AND 运算符和OR运算符 这两个运算符一般被称为连接运算符,用来缩小sqlite所选的数据 AND 运算符是当所有的条件都为真时,表达式才为真 sqlite and name = "bb& ...
- 在 WebSphere Application Server V7 集群环境中管理 HTTP session[阅读]
http://www.ibm.com/developerworks/cn/websphere/library/techarticles/1012_dingsj_wascluster/1012_ding ...