gulp 常用方法

个人博客
错误的地方请指出，谢谢

npm

• 官网[https://www.npmjs.com]
• node package manager
• 命令:
  
  • 初始化:npm init
  • 安装指定包:npm install jquery --save
  • 删除指定包:npm remove jquery --save
  • 下载安装package.json中dependencies属性对应的文件:npm install --production

browser-sync

• 更改代码之后自动刷新浏览器
• 需要使用npm进行全局安装:npm install browser-sync -g,-g表示安装到全局
• 使用:browser-sync start --server --files "./index.html,app.css,./css/*.css,*.*"
• –files参数指定要监视的文件，后面跟要监视的文件的文件路径以逗号分隔。

gulp

官网
中文网

• 前端自动化构建工具
  js压缩,var x,xname，混淆
  合并.
  css压缩
  html压压缩

• grunt ,webpack…

核心的5个方法

• task,gulp中是一个个任务的形式来实现功能。
  
  • task(‘任务名’,function(){
    …..
    });
• src
  
  • src(‘./*.js’)
• dest(‘./minjs/’)// 指定处理后的文件的输出路径.
• watch(‘./*.js’,[‘任务名1’,’任务名2’]);
• run(‘任务名’);//执行指定的任务.

gulp的安装

• 使用npm 进行安装
• npm install gulp-cli -g;

gulp 使用

使用时还需要在项目中通过npm非全局安装gulp

• npm install gulp --save-dev

还需要在当前项目根目录添加一个gulpfile.js文件来写具体的任务代码.

// 得到gulp对象
var gulp = require('gulp');


// 引入gulp-uglify插件，只是用来压缩，混淆
var uglify = require('gulp-uglify');

// 合并,即能合并js,也能合并css
var concat = require('gulp-concat');

// 用来对css进行压缩操作的插件
var cssnano = require('gulp-cssnano');

// 引用gulp-htmlmin对html进行压缩
var htmlmin = require('gulp-htmlmin');

// 1.新建任务
gulp.task('script', function() {
  // 这里写任务具体需要做的事情.
  // 2.匹配到app.js文件,如果使用多个规则，需要以数组的形式来书写第一个参数，数组中的每一个元素都是一个规则。
  gulp.src(['./app.js', './signIn.js'])
    .pipe(concat('all.js'))
    // 压缩，混淆
    .pipe(uglify())
    .pipe(gulp.dest('./dist'))
    // 输出到指定目录
});

// 新建对css进行处理的任务.
gulp.task('style', function() {
  // 匹配css文件
  gulp.src(['./style.css', './signIn.css'])
    .pipe(concat('all.css')) // 需要指定一个名字，作为压缩后文件的文件名
    .pipe(cssnano())
    .pipe(gulp.dest('./dist'))
});

// 压缩html任务
gulp.task('html', function() {
  // 匹配html文件
  gulp.src('./index.html')
    .pipe(htmlmin({
      collapseWhitespace: true
    }))
    .pipe(gulp.dest('./dist/'));
});

// 单独创建任务来监视文件变化
gulp.task('watch', function() {
  // 监视文件变化，并调用指定任务处理代码
  // 使用多个规则用数组,第二个参数，是想要执行的任务
  gulp.watch(['./app.js', './signIn.js'], ['script']);
})

gulp的一些插件

• 也是使用npm安装
• 对js代码进行压缩 gulp-uglify
• 对代码进行合并 gulp-concat
• 对css进行压缩 gulp-cssnano
• 对html进行压缩 gulp-htmlmin

gulp-less 的使用

可以参考知乎的文章：

https://zhuanlan.zhihu.com/p/20903085

最全指南：
gulp入门指南