整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
ulp是是前端开发对代码进行构建的工具，是基于 Nodejs 的自动任务运行器，他能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在开发中使用能有效提高工作效率，使用：
既是基于Nodejs的任务运行器，自然就需要先安装Nodejs环境，以下便是安装步骤：
安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务
1. 安装 NodeJS 环境
到nodeJS官网选择下载，运行安装包安装即可。
2.初始化，生成package.json 文件：
在项目文件夹下打开命令提示符执行下列命令（打开方式：shift+鼠标右键，在此处打开明亮窗口）：
npm init
选装 cnpm( npm淘宝镜像 )：
npm install -g cnpm --registry=https://registry.npm.taobao.org
3. 全局安装 gulp
npm install gulp -g
全局安装好后，可以在命令提示符下使用 gulp 的命令行工具（使用 gulp 命令）
gulp -v
**以上全局安装一次即可**
4. 在项目目录中生成 package.json 文件
npm init
使用默认输入，一路回车即可
或：npm init -y
5. 在项目本地安装 gulp(安装好后，在项目目录下生成 node_modules 文件夹)
npm install gulp --save-dev
或
npm i gulp --save-dev
或
npm i gulp -D
6. 安装 gulp 插件：
gulp-clean-css(压缩CSS)
npm install gulp-clean-css -D
gulp-htmlmin(压缩html)
npm i gulp-htmlmin -D
gulp-babel(将ES6的代码转换为ES5的代码)
npm install gulp-babel babel-core babel-preset-env --save-dev
gulp-uglify(压缩JS)
npm i gulp-uglify -D
gulp-rename(重命名)
npm i gulp-rename -D
gulp-imagemin(压缩图片)
gulp-concat(合并文件)
gulp-connect ( webserver 能够部署静态资源，能够实现浏览器自动刷新--需要浏览器插件支持--livereload)
npm i gulp-connect（连接）
7. 在项目根目录下，创建 gulpfile.js(固定名称) 的文件：
**gulpfile.js：**
//引入模块
const gulp = require("gulp"),
connect = require("gulp-connect"),
sass = require("gulp-sass");
//定制，启动服务器
gulp.task("connect",function(){
connect.server({
root:"dist",//webserver的根目录
livereload:true//浏览器自动刷新
});
});
//复制HTML文件到dist目录下，让HTML页面重新加载
gulp.task("html",function(){
gulp.src("src/**/*.html")
.pipe(gulp.dest("dist"))
.pipe(connect.reload());
});
//复制js文件到dist目录下,js重新加载
gulp.task("js",function(){
gulp.src("src/js/**/*.js")
.pipe(gulp.dest("dist/js"))
.pipe(connect.reload());//浏览器自动刷新
});
//复制lib目录到dist下
gulp.task("copy-lib",function(){
gulp.src("src/lib/**/*.*")
.pipe(gulp.dest("dist/lib"))
});
//复制img目录到dist下
gulp.task("copy-img",function(){
gulp.src("src/img/**/*.*")
.pipe(gulp.dest("dist/img"))
});
//复制mock目录到dist下
gulp.task("copy-mock",function(){
gulp.src("src/mock/**/*.*")
.pipe(gulp.dest("dist/mock"))
});
gulp.task("copy",["copy-lib","copy-img","copy-mock"])
//编译*.scss文件为*.css
gulp.task("sass",function(){
gulp.src("src/sass/*.scss")
.pipe(sass({outputStyle:"compressed"}))
.pipe(gulp.dest("dist/css"))
.pipe(connect.reload());
})
//监视文件的修改
gulp.task("watch",function(){
gulp.watch("src/sass/*.scss",["sass"]);
gulp.watch("src/**/*.html",["html"]);
gulp.watch("src/js/**/*.js",["js"]);
});
//定制默认（缺省）任务
gulp.task("default",["html","js","sass","copy","connect","watch"])
8. 在命令行中执行任务：
gulp 任务名称
或 gulp
9.本地访问localhost或本机IP即可运行项目
Gulp运行成功结果如下：
ulp是是前端开发对代码进行构建的工具，是基于 Nodejs 的自动任务运行器，他能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在开发中使用能有效提高工作效率，使用：
既是基于Nodejs的任务运行器，自然就需要先安装Nodejs环境，以下便是安装步骤：
安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务
1. 安装 NodeJS 环境
到nodeJS官网选择下载，运行安装包安装即可。
2.初始化，生成package.json 文件：
在项目文件夹下打开命令提示符执行下列命令（打开方式：shift+鼠标右键，在此处打开明亮窗口）：
npm init
选装 cnpm( npm淘宝镜像 )：
npm install -g cnpm --registry=https://registry.npm.taobao.org
3. 全局安装 gulp
npm install gulp -g
全局安装好后，可以在命令提示符下使用 gulp 的命令行工具（使用 gulp 命令）
gulp -v
**以上全局安装一次即可**
4. 在项目目录中生成 package.json 文件
npm init
使用默认输入，一路回车即可
或：npm init -y
5. 在项目本地安装 gulp(安装好后，在项目目录下生成 node_modules 文件夹)
npm install gulp --save-dev
或
npm i gulp --save-dev
或
npm i gulp -D
6. 安装 gulp 插件：
gulp-clean-css(压缩CSS)
npm install gulp-clean-css -D
gulp-htmlmin(压缩html)
npm i gulp-htmlmin -D
gulp-babel(将ES6的代码转换为ES5的代码)
npm install gulp-babel babel-core babel-preset-env --save-dev
gulp-uglify(压缩JS)
npm i gulp-uglify -D
gulp-rename(重命名)
npm i gulp-rename -D
gulp-imagemin(压缩图片)
gulp-concat(合并文件)
gulp-connect ( webserver 能够部署静态资源，能够实现浏览器自动刷新--需要浏览器插件支持--livereload)
npm i gulp-connect（连接）
7. 在项目根目录下，创建 gulpfile.js(固定名称) 的文件：
**gulpfile.js：**
//引入模块
const gulp = require("gulp"),
connect = require("gulp-connect"),
sass = require("gulp-sass");
//定制，启动服务器
gulp.task("connect",function(){
connect.server({
root:"dist",//webserver的根目录
livereload:true//浏览器自动刷新
});
});
//复制HTML文件到dist目录下，让HTML页面重新加载
gulp.task("html",function(){
gulp.src("src/**/*.html")
.pipe(gulp.dest("dist"))
.pipe(connect.reload());
});
//复制js文件到dist目录下,js重新加载
gulp.task("js",function(){
gulp.src("src/js/**/*.js")
.pipe(gulp.dest("dist/js"))
.pipe(connect.reload());//浏览器自动刷新
});
//复制lib目录到dist下
gulp.task("copy-lib",function(){
gulp.src("src/lib/**/*.*")
.pipe(gulp.dest("dist/lib"))
});
//复制img目录到dist下
gulp.task("copy-img",function(){
gulp.src("src/img/**/*.*")
.pipe(gulp.dest("dist/img"))
});
//复制mock目录到dist下
gulp.task("copy-mock",function(){
gulp.src("src/mock/**/*.*")
.pipe(gulp.dest("dist/mock"))
});
gulp.task("copy",["copy-lib","copy-img","copy-mock"])
//编译*.scss文件为*.css
gulp.task("sass",function(){
gulp.src("src/sass/*.scss")
.pipe(sass({outputStyle:"compressed"}))
.pipe(gulp.dest("dist/css"))
.pipe(connect.reload());
})
//监视文件的修改
gulp.task("watch",function(){
gulp.watch("src/sass/*.scss",["sass"]);
gulp.watch("src/**/*.html",["html"]);
gulp.watch("src/js/**/*.js",["js"]);
});
//定制默认（缺省）任务
gulp.task("default",["html","js","sass","copy","connect","watch"])
8. 在命令行中执行任务：
gulp 任务名称
或 gulp
9.本地访问localhost或本机IP即可运行项目
Gulp运行成功结果如下：
Author : Runsen
@Date : 2019/12/19
gulp是基于流的前端构件化工具。gulp是自动化项目的构建利器；不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。同时使用非常简单，学习成本低。这个压缩工具也是前端必学的的工具。
环境搭建
安装成功后，输入gulp -v 查看版本
在项目中安装 npm install --save-dev gulp，安装成功后就可以开始写配置文件了。
环境开发
npm init 项目初始化 ，此时根目录会出现package.json
npm install gulp --save-dev 在本地项目局部安装gulp
创建gulpfile.js文件
// 以下代码会执行在node环境下
var gulp = require( "gulp" );
// 创建一个gulp的任务
gulp.task( "default",function(done){
console.log( "hello gulp" );
done();
} );在命令行执行gulp default
压缩css
npm install gulp-cssnano --save -dev 在本地项目安装gulp-cssnano
新建一个css文件夹，在新建index.css
*{
margin: 0;
padding: 0;
}
p{
color: red
}gulpfile.js代码如下
var gulp = require('gulp');
// 需要先安装gulp-cssnano
var cssnano = require('gulp-cssnano');
// 定义一个处理css文件改动的任务
gulp.task('css',function(){
gulp.src('./css/*.css')
.pipe(cssnano())
.pipe(gulp.dest("./dist/css/"))
});新建dist文件夹来存放生成的css任务
执行 gulp css
在dist文件夹的css文件夹生成了index.css *{margin:0;padding:0}p{color:red} gulp 修改压缩的文件名
npm install gulp-rename --save-dev 在本地项目安装
gulpfile.js代码修改如下
var gulp = require('gulp');
// 需要先安装gulp-cssnano
var cssnano = require('gulp-cssnano');
var rename = require('gulp-rename')
// 定义一个处理css文件改动的任务
gulp.task('css',function(){
// 处理css文件的目录
return gulp.src('./css/*.css')
.pipe(cssnano())
// 将index.css生成index.min.css
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest("./dist/css/"))
});执行 gulp css，这样将index.css命名为index.min.css
js压缩
npm install gulp-uglify --save-dev 安装js压缩插件
同样的道理新建js文件夹新建index.js
代码是生成斐波那契数组
function getFibonacci(n) {
var fibarr = [];
var i = 0;
while(i<n) {
if(i<=1) {
fibarr.push(i);
}else{
fibarr.push(fibarr[i-1] + fibarr[i-2])
}
i++;
}
return fibarr;
}gulpfile.js代码修改如下
var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify')
// 对js请求进行压缩和混淆
// 定义任务
gulp.task('myscript', function() {
// 1.匹配要处理的文件
return gulp.src('src/js/*.js')
// 2.将js代码压缩混淆
.pipe(uglify())
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest('./dist/js'))
})执行 gulp myscript
index.min.js代码就会压缩
function getFibonacci(n){for(var r=[],u=0;u<n;)u<=1?r.push(u):r.push(r[u-1]+r[u-2]),u++;return r}html 压缩
npm install gulp-htmlmin --save-dev
新建html文件夹在新建index.html
gulpfile.js代码修改如下
var gulp = require('gulp');
var rename = require('gulp-rename');
// 对html进行压缩的包
var htmlmin = require('gulp-htmlmin')
// 对html进行压缩
// 定义任务
gulp.task('myhtml', function(){
// 1.匹配到要处理的html文件
return gulp.src('./html/*.html')
// 2.对html进行压缩!
.pipe(htmlmin({
collapseWhitespace:true // 去除空白符
}))
// 3.输出
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest('dist/html'))
})执行 gulp myhtml
index.html就会被压缩
使用gulp 压缩代码能使项目运行更加的流畅。
*请认真填写需求信息，我们会在24小时内与您取得联系。
