gulp 构建工具的使用

gulp 构建工具的使用

一、安装相关的插件

1、gulp

npm install gulp --save-dev

2、less 解析  插件

npm install gulp-less --save-dev

3、js 压缩和混淆插件

npm install gulp-uglify --save-dev

4、监控 less 变化的插件

npm install gulp-livereload --save-dev

5、css 压缩插件

npm install gulp-clean-css --save-dev

6、html 压缩插件

npm install gulp-htmlmin --save-dev

7、js 检查插件

npm install gulp-jshint --save-dev

8、文件合并插件

npm install gulp-concat --save-dev

9、重命名文件

npm install gulp-rename --save-dev

10、雪碧图制作插件

npm install gulp.spritesmith --save-dev

11、清空文件夹

npm install gulp-clean --save-dev

12、提示插件

npm install gulp-notify --save-dev

二、工程项目初始化

  • 创建工程项目 gulp

  • 进入对工程项目进行 npm 初始化

npm init
  • 工程目录结构

  • 文件输出结构

gulpfile.js 内容

  • 引入 gulp 需要使用的插件
var gulp = require("gulp"),
  //less转换css
  less = require("gulp-less"),
  //当less更新是,css同步更新
  livereload = require("gulp-livereload"),
  //HTML压缩
  htmlmin = require("gulp-htmlmin"),
  //js压缩和混淆
  uglify = require("gulp-uglify"),
  //css压缩
  cleanCss = require("gulp-clean-css");
  • 创建简单的 task 任务
gulp.task("hello", function() {
  console.log("Hello this a gulp task!");
});
  • 把 less 转换为 css 的 task
gulp.task("less", function() {
  return gulp
    .src("src/less/*.less") //监控文件路径
    .pipe(less())
    .pipe(gulp.gest("src/css")) //转换后文件的输出路径
    .pipe(livereload()); //lss更新时css同步更新
});
  •  压缩 html 文件
gulp.task("html", function() {
  // 对html文件压缩的参数配置
  var options = {
    removeComments: true, //清除HTML注释
    collapseWhitespace: true, //压缩HTML
    collapseBooleanAttributes: true, //省略布尔属性的值  ==> 
    removeEmptyAttributes: true, //删除所有空格作属性值  ==> 
    removeScriptTypeAttributes: true, //删除
                    
                    

你可能感兴趣的:(Gulp)