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