您现在的位置:首页 >> 前端 >> 内容

gulp相关命令及操作

时间:2017/7/24 9:25:14 点击:

  核心提示:安装好node.jswindow+r键:cmd1、先进入到你本地项目目录下:(1)f: (2)cd 一个文件夹2、建一个项目,其名称叫作mySass:mkdir mySass3、cd mySass进入...

安装好node.js

window+r键:cmd

1、先进入到你本地项目目录下:(1)f: (2)cd 一个文件夹

2、建一个项目,其名称叫作“mySass”:mkdir mySass

3、cd mySass进入文件内

4、npm init 根据出来的问题写入文件名、版本、描述、作者

5、dir 可查看文件夹里的内容,看到生成了一个package.json文件

6、打开编辑器,打开创建项目的目录,可看到json形式的文件

7、npm install gulp –save-dev 安装gulp开发依赖:在package.json文件内多了一行内容(”gulp”: “^3.9.1”)指明了gulp依赖

8、删除项目文件夹中除了package.json文件的所有文件

9、npm install 发现被删除的东西又重新出现在文件夹内:因为已经声明了gulp依赖

10、gulp复制:

在编辑器创建一个JS文件:

var gulp = require (“gulp”);

gulp.task(“copy_index”,function(){

return gulp.src(“index.html”).pipe(gulp.dest(“dest”));

})

“dest”是保存地址,”index.html”是要复制的文件

在命令端输入:gulp copy_index即可在项目内看见已复制的文件

复制文件夹里的内容:”文件夹名/*”(文件夹里所有内容,包括子文件夹,但不包括子文件夹里的内容)

同时复制多个文件:将要复制的文件写咸亨数组的形式

复制时排除不想要的文件:!文件名

11、gulp依赖:

gulp.task(“build”,[写入要依赖的任务],function(){})

先同时完成所有依赖的任务后再完成本身的任务

12、gulp监听:

gulp.task(“watch”,function(){

gulp.watch(“文件名”,[关于此文件的任务]);})

在命令端执行任务,只要文件发生变化就执行任务,直至取消监听(ctrl+c)

13、gulp下sass文件转化成css文件:

<1>在命令端安装sass插件:npm install gulp-sass –save-dev 可以在node-modules文件夹内查看到gulp-sass文件,在package.json文件内出现gulp-sass版本

<2>在gulpfile.js中:

var sass = require(“gulp-sass”);

gulp.task(“sass”,function(){ return gulp.src(“要转化的文件”).pipe(sass()).pipe(gulp.dest(“存放的目录”));})

<3>在命令端输入:gulp sass

14、gulp下less文件转化成css文件:

<1>在命令端安装less插件:npm install gulp-less –save-dev

<2><3>同sass转化,把所有sass改成less

15、gulp下浏览器运行:

<1>在命令端安装connect插件:npm install gulp-connect –save-dev

<2>在gulpfile.js中:

var connect = require(“gulp-connect”);

gulp.task(“server”,function(){connect.server({root:”文件根目录”});})

<3>在命令端输入:gulp connect

<4>在浏览器输入命令端显示的地址

16、gulp下浏览器实时刷新:

<1>在server任务中添加属性:

connect.server({root:”文件根目录”,liveload:ture});

<2>在浏览器刷新依据的任务下添加管道:.pipe(connect.reload());

<3>创建一个默认任务:gulp.task(“default”,[“serve”,”watch”])

<4>在命令端运行任务:ctrl+c先停止服务器。输入gulp,浏览器根据页面变化实时刷新

17、gu lp下合并文件:

安装插件:concat

在gulpfile.js中包含进插件

创建任务:gulp.task(“任务名”,function(){return gulp.src([“要合并的文件名”,”要合并的文件名”,]).pipe(concat(“合并后的文件名”)).pipe(gulp.dest(“存放目录”))})

在命令端运行任务:gulp 任务名

18、gulp下压缩js文件使最小化:

安装插件:uglify

在gulpfile.js中包含进插件

在合并文件的任务中concat管道后添加一个管道:.pipe(uglify())

在命令端运行任务:gulp 任务名

19、gulp下重命名:

安装插件:npm install gulp-rename –save-dev

在gulpfile.js中包含进插件:var rename = require(“gulp-rename”);

将一个已经合并命名输出后的文件压缩后重命名再输出:

在压缩管道后添加一个重命名管道–.pipe(rename(“文件新名”))

在命令端运行任务

20、gulp下压缩css文件使最小化:

安装插件:minify-css

在gulpfile.js中包含进插件 :var minifyCSS = require(“gulp-minify-css”);

在转化成css文件的任务中转化管道后添加一个压缩管道:.pipe(minifyCSS())

在命令端运行任务

21、gulp下优化图像尺寸:

安装插件:imagemini

在gulpfile.js中包含进插件

在任务中加入优化管道:.pipe(imagemini())

在命令端运行任务

Tags:GU UL LP P相 
作者:网络 来源:ll_0801xyz