gulp入门

作者: 糯米小馒头 | 来源:发表于2017-11-28 14:44 被阅读0次

前端工具使用
[基础] 列举常用的gulp插件
Hello-Gulp
gulp安装方法，ionic native developer
前端杂记
gulp 入门
前端自动化构建工具gulp
sass/git/gulp
gulp使用
gulp 入门

1.gulp环境配置

1.建好我们的项目文件夹（名字随便取，不能是中文，不要取名为gulp后期不好维护）

01.png

2.打开建好的文件夹  -->在文件夹里面打开命令窗口

02.png

03.png

3.写好我的项目的基本结构

04.png

05.png

4.开始配置
  a.全局安装gulp  (npm install -g gulp)
  b.构建我们项目本身的文件(nmp init)
  c.在我们的项目中会多出一个package.json的文件
  d.安装本地gulp(npm install --save-dev gulp)  向我们的package建立依赖
  f.安装好了就会在我们项目中多出两个文件

06.png

07.png

08.png

09.png

10.png

5.在编译工具里打开我们的项目

11.png

6.检验是否可以正常运行
  a.在根目录下新建一个名为gulpfile.js的文件
  b.在里面写好我们要执行的代码
  c.在命令窗口输入我们的命令（gulp task1）

12.png

13.png

14.png

2.gulp常用的方法

1.gulp.task -- 定义任务
2.gulp.src -- 找到需要执行的文件
3.gulp.dest --执行任务文件的去处
4.gulp.watch -- 观察文件是否发生变化

gulp.task执行默认方法
   a.编写好我们要执行的默认方法
   b.在窗口输入gulp

15.png

16.png

gulp拷贝文件
  a.编写好我们要克隆的代码
  b.在窗口输入gulp  <方法名>

17.png

18.png

19.png

gulp 图片压缩
  a.首先下载图片压缩模块 在命令窗口输入（npm install gulp-imagemin --save-dev）
  b.写好要压缩图片的
  c.在命令窗口执行方法（gulp  <方法名>）
代码

20.png

21.png

22.png

压缩js 
  a.js的压缩和图片的一样，只是用到的压缩模块不一样
  b.下载js的压缩模块(nmp install gulp-uglify --save-dev)

将sass转化成css
  a.下载sass转化模块（npm install gulp-sass --save-dev）
  b.写好转化的代码
  c.执行任务（gulp  方法名）

23.png

执行多个任务

image.png

合并代码

image.png

监听文件是否发生变化

image.png

完整的gulp.js代码

var gulp=require("gulp");
/*
 * gulp常用的方法
 * 
 * gulp.task -- 定义任务
 * 
 * gulp.src -- 找到需要执行的文件
 * 
 * gulp.dest --执行任务文件的去处
 * 
 * gulp.watch  -- 观察文件是否发生变化
 * 
 * 
 * */

//定义任务
gulp.task("task1",function(){
    console.log("hello,gulp")
});
//执行任务 gulp task1


//执行默认任务
//gulp.task("default",function(){
//  console.log("这是默认任务 只需要执行gulp")
//})
//执行任务 gulp


//拷贝文件
gulp.task("copyfile",function(){
    gulp.src("src/*.html")
    .pipe(gulp.dest("build"))
})
//执行任务 gulp copyfile


//压缩图片
var imagemin=require("gulp-imagemin");
gulp.task("imgmin",function(){
    gulp.src("src/images/*")
    .pipe(imagemin())
    .pipe(gulp.dest("build/images"))
})
//执行任务 gulp imgmin


//压缩js文件
var jsmin=require("gulp-uglify");

 gulp.task("minfy",function(){
    gulp.src("src/js/*.js")
    .pipe(jsmin())
    .pipe(gulp.dest("build/js"))
 })
 //执行任务
 
 //将sass 转换css
var cssmin=require("gulp-sass");

 gulp.task("sass",function(){
    gulp.src("src/css/*.scss")
    .pipe(cssmin().on("error",cssmin.logError))
    .pipe(gulp.dest("build/css"))
 })
 //执行任务 gulp sass
 
/*
 *  执行多个任务
 *  1.将我们的默认任务注释掉
 *  2.默认任务只能有一个
 * 
 */
gulp.task("default",["task1","copyfile","imgmin","merge","sass"])


//代码合并
//npm install gulp-concat --save-dev 下载合并模块

var concat=require("gulp-concat");

 gulp.task("merge",function(){
    gulp.src("src/js/*.js")
    .pipe(concat("merge.js"))
    .pipe(jsmin())
    .pipe(gulp.dest("build/js"))
 })
 //执行任务
//我们是合并两个js文件 并且对他们进行压缩
//所以我们需要注释掉刚刚压缩js的代码，而且不需要在默认任务里执行

//监听文件是否发生变化
gulp.task("watch",function(){
    gulp.watch("src/css/*.sass",["sass"]);
    gulp.watch("src/images/*",["imgmin"]);
    gulp.watch("src/js/*.js",["minfy"]);
    gulp.watch("src/*.html",["copyfile"]);
})
//执行任务  gulp watch

3.gulp 常用的插件

简书参考地址

1.压缩js (gulp-uglify)

npm install --save-dev gulp-uglify

2.压缩css(gulp-minify-css)

npm install --save-dev gulp-minify-css

3.压缩图片（gulp-imagemin）

npm install gulp-imagemin --save-dev

4.压缩html（gulp-minify-html）

npm install --save-dev gulp-minify-html

5.JS代码检查（gulp-jshint）

npm install --save-dev jshint gulp-jshint

var gulp = require('gulp');
var jshint = require("gulp-jshint");
 
gulp.task('jsLint', function () {
    gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter()); // 输出检查结果
});