源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-09-17 13:40 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:gulp教程_从入门到项目中快速上手使用方法
[b]gulp是什么?[/b] gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率。在 Web 前端开发工作中有很多“重复工作”,比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作” [b]一、安装gulp与压缩js文件[/b] 命令: [b]npm install gulp -g[/b] [b]npm install gulp --save-dev[/b] [b]初始化项目package.json的配置:npm init --yes[/b] [b]创建项目的目录结构 [/b]
 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文件是可以正常使用的 [b]二、压缩css文件[/b] 安装插件: 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}

[b]三、编译less文件[/b] 安装插件: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;
 }
[b]四、合并js文件[/b] 安装插件: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}};
[b]五、自动监测文件变化,执行任务[/b]
 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教程_从入门到项目中快速上手使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部