时间戳

首页 > 技术文章 > gulp 使用入门

gulp 使用入门

liuyishi 原文

FzF0X9.md.png
什么是gulp?

用自动化构建工具增强你的工作流程！
Gulp 是基于node.js的一个前端自动化构建工具，开发者可以使用它构建自动化工作流程（前端集成开发环境）。
使用gulp你可以简化工作量，让你把重点放在功能的开发上，从而提高你的开发效率和工作质量。
例如：你可以用gulp可以网页自动刷新，和MVVM开发模式很相似。你也可以使用gulp对sass进行预处理、代码检测、图片优化压缩、只需要一个简单的指令就能全部完成。

中文网

全局安装 gulp

$ npm install --global gulp

作为项目的开发依赖（devDependencies）安装：

$ npm install --save-dev gulp

为 gulp 安装插件(读取 package.json 文件下所需的插件)

$ npm install --save-dev

在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require('gulp');
gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

运行 gulp：

$ gulp

默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。

想要单独执行特定的任务（task），请输入 gulp <task> <othertask>。

gulpfile.js示例

var gulp = require('gulp')
    cssmin = require('gulp-minify-css')             //css压缩
    uglify = require('gulp-uglify')               //js压缩
    javascriptObfuscator = require('gulp-javascript-obfuscator') // js混淆
    imagemin = require('gulp-imagemin')            //图片的压缩
    base64 = require('gulp-base64')                //- 把小图片转成base64字符串
    htmlmin = require('gulp-htmlmin')              //html的压缩
    babel = require('gulp-babel')
    rename = require("gulp-rename")
 
//压缩  css文件   和base64 和文件名加md5后缀
gulp.task('testCssmin', function () {
    gulp.src('original/css/*.css')
        .pipe(base64())
        // .pipe(rev())               //文件名加md5后缀
        .pipe(cssmin())
        // .pipe(rev.manifest())　　　　　　　　 //rev-mainfest.json文件，里面是压缩文件的信息
        .pipe(gulp.dest('dist/css'));
});
 
// 压缩 js 文件
gulp.task('script', function() {
    // 1. 找到文件
    gulp.src('original/js/*.js')
        .pipe(babel())
    // 2. 压缩文件
        .pipe(uglify())
    // 3. 混淆js
        .pipe(javascriptObfuscator({
          compact:true,
          selfDefending:true
        }))
    // 4. 都添加.min.js后缀
        .pipe(rename({suffix: '.min'}))
    // 5. 另存压缩后的文件
        .pipe(gulp.dest('dist/js/'))
})
//压缩  img文件
gulp.task('testImagemin', function () {
    gulp.src('original/images/common/*.{png,jpg,gif,ico,svg}')
        .pipe(imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest('dist/images/common'));
});
//压缩html文件
gulp.task('testHtmlmin', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp.src('original/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/'));
});
 
 
// 监听文件的变化
/* gulp.task('watch', function() {
    livereload.listen();
    gulp.watch(['css/*.css'], ['testCssmin']);
    gulp.watch(['js/*.js'], ['script']);
    gulp.watch(['images/*.{png,jpg,gif,ico}'], ['testImagemin']);
    gulp.watch(['/*.html'], ['testHtmlmin']);
}); */
/* 合并上述我的方法 监控并执行任务 */
gulp.task('default', [
        //'testImagemin',
        'script',
        //'testCssmin',
        //'testHtmlmin',
    ]
);

package示例

{
  "name": "test",
  "version": "0.0.1",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^8.0.0",
    "gulp-base64": "^0.1.2",
    "gulp-concat": "^2.6.1",
    "gulp-htmlmin": "^4.0.0",
    "gulp-imagemin": "^4.1.0",
    "gulp-javascript-obfuscator": "^1.1.5",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-processhtml": "^1.2.0",
    "gulp-rev": "^8.1.1",
    "gulp-rev-collector": "^1.2.4",
    "gulp-uglify": "^3.0.0"
  },
  "dependencies": {
    "gulp-rename": "^1.4.0"
  }
}

推荐阅读