gulp的安装和配置

2023-08-20 12:50:16

gulp的安装和使用方法

1先是有node为前提的，

2安装淘宝镜像

　2.1因为很多npm包都是国外的，所以安装起来很慢，所以我们可以利用淘宝的镜像服务器来进行安装后续的包，速度和成功率会高很多。
　所以首先打开cmd，输入指令： npm --registry=https://registry.npm.taobao.org install -g cnpm

3是安装gulp

首先，新建一个用来项目开发的空文件夹，然后再命令行工具里cd到文件夹中(有git的童鞋在文件夹里直接右键 git bash here也是Ok的)
然后执行以下 npm init,会发现文件夹中多出一个
然后在命令行中执行 npm init,效果如下图，一路无脑回车即可

执行完成后你会发现原本的空文件夹里多出了一个叫package.json的文件。说明执行成功啦。
完成后接着执行指令：
npm install --save-dev gulp
注意:1.命令行工具一定要进入到这个用来项目开发的空文件夹
2.这里不要使用cnpm，使用npm即可（亲身经历，用cnpm之后运行gulp的时候会报错，大概是cnpm的某些包不全）

接下来需要等待一会儿，完成后，需要去文件夹的根目录中，新建一个名为gulpfile.js的javascript文件，写入内容如下:

1 var gulp = require('gulp');

2

3 gulp.task('default', function() {

4   // 将你的默认的任务代码放在这

5 });

最后在命令行里执行指令: glup 回车

效果如上图，则说明glup已经成功安装在项目中啦~

----以上引用的是http://www.cnblogs.com/YuuyaRin/p/6159809.html

3.1--save-dev和--save的区别

会把gulp包安装到node_modules目录中
会在package.json的dependencies属性下添加gulp
之后运行npm install命令时，会自动安装gulp到node_modules目录中
--save---之后运行npm install --production或者注明NODE_ENV变量值为production时，会自动安装gulp 到node_modules目录中(开发完后需要用到依赖包，如jquery等)
--save-dev--之后运行npm install --production或者注明NODE_ENV变量值为production时，不会自动安装gulp 到node_modules目录中（发布后用不到它，而只是在我们开发才用到它

4使用gulp压缩和合并js文件

在之前建立的项目中写入，在根目录新建js文件夹，并在文件夹中新建两个js文件，代码如下：

index.js:

var index={};
index={
test:function(argument){
console.log('test');
}
}
index.test();

main.js:

var main = {};
main.test=function(argument){
console.log("main test");
}
main.test();

在根目录新建文件夹build，并在build里新建一个空的js文件：all.min.js

在根目录下新建index.html ，在其中引用build下的all.min.js。

index.html:

<script type="text/javascript" src="build/all.min.js"></script>

接下来编辑gulpfile.js文件，来告诉gulp我们要把index.js，main.js合并起来压缩再写入all.min.js中

gulpfile.js:

var gulp = require('gulp');//gulp自身
var uglify= require('gulp-uglify');//<span style="font-family: Arial, Helvetica, sans-serif;">引入压缩组件</span>
var concat = require('gulp-concat');//<span style="font-family: Arial, Helvetica, sans-serif;">引入合并组建</span>
var paths = {
scripts:['js/index.js','js/main.js'] //['js/*.js','!js/changDateFormat.js']排除所有文件中的changDateFormat.js文件
} //定义要操作的文件路径
gulp.task('default', function() { //当这里"default"写成其他的名字(如:asd)时,在运行时就余需要用 gulp asd
gulp.src(paths.script)//找到项目下paths变量所定义的script文件
.pipe(uglify())//压缩
.pipe(rename({ suffix: "-min",prefix:"bon-",extname:".md"}))//suffix加后缀，prefix加前缀，extname修改文件格式（是js还是html等）
.pipe(concat('all.min.js'))//输入到all.min.js中
.pipe(gulp.dest('build'));//指定目录
});

tips:gulp的执行流程采用了流式操作，每一个pipe()可以理解成，上一个操作的输出，就是下一个操作的输入，比如uglify()压缩后输出的，就是concat要输入到文件中的，而concat输出的文件，是gulp.dest要加入的目录中的，可以理解成每部操作都return了下一步要使用的东西。

最终目录结构如下：

接下来就可以在命令行工具中cd到项目的根目录中执行gulp指令了。

此时也许会出现 Cannot find module 'gulp-uglify'这样的报错，是因为gulpfile所require的gulp-uglify和gulp-concat插件并不存在，所以可以利用npm在项目中装入即可：

npm install --save-dev gulp-uglify 回车

npm install --save-dev gulp-concat 回车

可同时下载gulp-uglify和gulp-concat(用"空格"将两个文件隔开就好)npm install --save-dev gulp-uglify gulp-concat

4.1引入组件

var gulp = require("gulp");//导入glup
var sass = require("gulp-sass");//拷贝并编译scss
var server = require("gulp-connect");//建立服务器
var concat = require("gulp-concat");//合并js文件
var uglify = require("gulp-uglify");//压缩js文件
var minifyCss = require("gulp-minify-css");压缩css
var imagemin = require("gulp-imagemin");压缩图片
var rename = require("gulp-rename");//文件重命名
var rev = require("gulp-rev");//给静态资源文件名添加一个哈希值后缀
var revCollector = require("gulp-rev-collector");//自动添加版本号
var autoprefixer = require("gulp-autoprefixer");//对css添加浏览器后缀
var htmlmin = require("gulp-htmlmin");//对html页面进行压缩

安装完成后再次执行gulp指令，成功后，可以查看一下我们原本空的all.min.js文件，可以看到main.js和index.js已经在all.min.js中压缩合并了

var index={};index={test:function(e){console.log("test")}},index.test();
var main={};main.test=function(n){console.log("main test")},main.test();

然后运行一下我们的index.html，打开浏览器控制台，会发现两个js的内容成功输出：

说明gulp成功执行了JS文件的合并与压缩的操作。

码农公寓

gulp的安装和使用方法

相关文章