gulp 使用入门

gulp 使用入门_第1张图片
什么是gulp?

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

中文网

全局安装 gulp

$ npm install --global gulp

作为项目的开发依赖(devDependencies)安装:

$ npm install --save-dev gulp

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

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

运行 gulp:

$ gulp

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

想要单独执行特定的任务(task),请输入gulp

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,//省略布尔属性的值  ==> 
        removeEmptyAttributes: true,//删除所有空格作属性值  ==> 
        removeScriptTypeAttributes: true,//删除
                    
                    

你可能感兴趣的:(gulp 使用入门)