前端开发使用工具 gulp

前端开发使用工具 gulp


gulp

gulp是基于流的前端构件化工具。gulp是自动化项目的构建利器;不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成。同时使用非常简单,学习成本低。这个压缩工具也是前端必学的的工具。

环境搭建

  • node
    因为npm跟随node的包安装管理工具。具体下载直接百度nodejs中文网,根据自身的环境(windows linux mac)下载安装包(msi)。直接进行安装。

  • npm install -g gulp
    安装成功后就可以在命令行输入gulp相关的命令了

前端开发使用工具 gulp
安装成功后,输入gulp -v 查看版本
前端开发使用工具 gulp

在项目中安装 npm install --save-dev gulp,安装成功后就可以开始写配置文件了。

环境开发

  • vscode

  • nodejs

  • gulp

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

前端开发使用工具 gulp

压缩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

前端开发使用工具 gulp
  • 在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

前端开发使用工具 gulp

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

    前端开发使用工具 gulp
  • 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

前端开发使用工具 gulp
  • index.html就会被压缩

前端开发使用工具 gulp使用gulp 压缩代码能使项目运行更加的流畅。

前端开发使用工具 gulp


最后,祝有所学习,有所成长


前端开发使用工具 gulp


转发,好看支持一下,感谢


你的转发,就是对我最大的支持


上一篇:gulp的使用


下一篇:1.1 环境搭建及依赖包安装