gulp基础教程

栏目: 编程工具 · 发布时间: 6年前

内容简介:全局安装 gulp:作为项目的开发依赖(devDependencies)安装:在项目根目录下创建一个名为 gulpfile.js 的文件:

全局安装 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)将会被运行,在这里,这个任务并未做任何事情。

至此,一个简单的gulp已经完成,接下来让我们来完善部分功能

gulp功能完善

生成package.json文件

$ npm init //一直回车,有需要的可以设置

安装所需包

使用淘宝镜像

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
示例 $ cnpm install [name]

接着

$ cnpm i browser-sync gulp gulp-clean-css gulp-imagemin gulp-rename  gulp-sass gulp-uglify gulp.spritesmith gulp-autoprefixer --save

新建gulpfile.js文件

添加

var gulp         = require('gulp'); 
var browserSync  = require('browser-sync').create(); //通过流的方式创建任务流程, 这样您就可以在您的任务完成后调用reload,所有的浏览器将被告知的变化并实时更新
var sass         = require('gulp-sass'); //sass转css
var reload       = browserSync.reload; 
var minifyCSS    = require('gulp-clean-css')  //css压缩
var uglify       = require('gulp-uglify') //js压缩
var imagemin     = require('gulp-imagemin') //图片压缩
var rename       = require('gulp-rename') //文件重命名
var autoprefixer = require('gulp-autoprefixer') //自动添加前缀

设置默认文件地址

code为文件夹,里面存放html css js文件
var src = {
    scss: 'code/scss/*.scss',
    css:  'code/css/*.css',
    html: 'code/*.html',
    js:   'code/js/*.js',
    images: 'code/images/*.{png,jpg,gif,ico}'
};

gulp.task(name[, deps], fn)

name: 任务的名字
deps: 一个包含任务列表的数组,这些任务会在你当前任务运行之前完成。
fn: 该函数定义任务所要执行的一些操作。通常来说,它会是这种形式:gulp.src().pipe(someplugin())。

// 静态服务器 + 监听 scss/html 文件
 gulp.task('serve', ['sass'], function() {
    browserSync.init({
        server: "./code"
    });

    gulp.watch(src.scss, ['sass']);
    gulp.watch(src.css, ['css']);
    gulp.watch(src.images, ['images'])
    gulp.watch(src.js, ['js-watch']);
    gulp.watch(src.js, ['js']);
    gulp.watch(src.html).on('change', reload);

});

scss编译后的css将注入到浏览器里实现更新

gulp.task('sass', function() {
    return gulp.src(src.scss)
        .pipe(sass())
        .pipe(minifyCSS({
            advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]
            compatibility: 'ie7',//保留ie7及以下兼容写法 类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式]
            keepBreaks: true,//类型:Boolean 默认:false [是否保留换行]
            keepSpecialComments: '*'
            //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀
        }))
        .pipe(autoprefixer())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest("code/css"))
        .pipe(reload({stream: true}));
});

雪碧图(有需要可以尝试)

var spritesmith = require('gulp.spritesmith');
 
 gulp.task('sprite', function () {
      return gulp.src('code/images/*.png')
         .pipe(spritesmith({
             imgName:'images/sprite20161010.png',  //保存合并后图片的地址
             cssName:'css/sprite.css',   //保存合并后对于css样式的地址
             padding:20,
             algorithm:'binary-tree',
         }))
         .pipe(gulp.dest('code/scss'));
 });

监听css文件

gulp.task('css', function() {
    return gulp.src(src.css)
        .pipe(minifyCSS())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest("code/css"))
        .pipe(reload({stream: true}));
});

监听js文件

gulp.task('js', function() {
    // 1. 找到文件
    return  gulp.src(src.js)
        //2. 压缩文件
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        //3. 另存压缩后的文件
        .pipe(gulp.dest('code/dest'))
        .pipe(reload({stream: true}));
})

//监听js文件变化实现热加载
gulp.task('js-watch', ['js'], browserSync.reload);

压缩图片任务

// 在命令行输入 gulp images 启动此任务
gulp.task('images', function () {
        // 1. 找到图片
        gulp.src(src.images)
        // 2. 压缩图片
        .pipe($.imagemin())
        // 3. 另存图片
        .pipe(gulp.dest('images'))
        .pipe(reload({stream: true}));
});

最后控制台输入gulp执行

gulp.task('default', ['serve']);

如果觉得帮助到了你,欢迎star -> https://github.com/wclimb/wclimb.github.io

完整代码

文件目录

-code
    -imgage
       1.png
    -css
       default.css
    -scss
       default.scss
    -js
       default.js
    index.html
gulpfile.js
package.json

package.json

{
  "name": "gulp-test",
  "version": "1.0.0",
  "description": "Gulp & SASS",
  "main": "gulpfile.js",
  "scripts": {
    "start": "gulp"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-clean-css": "^3.0.3",
    "gulp-imagemin": "^3.1.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^2.0.1",
    "gulp.spritesmith": "^6.4.0",
    "gulp-autoprefixer": "^4.0.0"
  },
  "dependencies": {
    
  }
}

gulpfile.js

var gulp         = require('gulp'); 
var browserSync  = require('browser-sync').create(); //通过流的方式创建任务流程, 这样您就可以在您的任务完成后调用reload,所有的浏览器将被告知的变化并实时更新
var sass         = require('gulp-sass'); //sass转css
var reload       = browserSync.reload; 
var minifyCSS    = require('gulp-clean-css')  //css压缩
var uglify       = require('gulp-uglify') //js压缩
var imagemin     = require('gulp-imagemin') //图片压缩
var rename       = require('gulp-rename') //文件重命名
var autoprefixer = require('gulp-autoprefixer') //自动添加前缀


var src = {
    scss: 'code/scss/*.scss',
    css:  'code/css/*.css',
    html: 'code/*.html',
    js:   'code/js/*.js',
    images: 'code/images/*.{png,jpg,gif,ico}'
};

// 静态服务器 + 监听 scss/html 文件
 gulp.task('serve', ['sass'], function() {
    browserSync.init({
        server: "./code"
    });

    gulp.watch(src.scss, ['sass']);
    gulp.watch(src.css, ['css']);
    gulp.watch(src.images, ['images'])
    gulp.watch(src.js, ['js-watch']);
    gulp.watch(src.js, ['js']);
    gulp.watch(src.html).on('change', reload);

});


// scss编译后的css将注入到浏览器里实现更新
gulp.task('sass', function() {
    return gulp.src(src.scss)
        .pipe(sass())
        .pipe(minifyCSS({
            advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]
            compatibility: 'ie7',//保留ie7及以下兼容写法 类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式]
            keepBreaks: true,//类型:Boolean 默认:false [是否保留换行]
            keepSpecialComments: '*'
            //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀
        }))
        .pipe(autoprefixer())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest("code/css")) //重新输出数据到某个文件夹,如果没有就会自动创建
        .pipe(reload({stream: true}));
});


// 雪碧图(有需要可以尝试)
//var spritesmith = require('gulp.spritesmith');
 
// gulp.task('sprite', function () {
//     return gulp.src('code/images/*.png')
//         .pipe(spritesmith({
//             imgName:'images/sprite20161010.png',  //保存合并后图片的地址
//             cssName:'css/sprite.css',   //保存合并后对于css样式的地址
//             padding:20,
//             algorithm:'binary-tree',
//         }))
//         .pipe(gulp.dest('code/scss'));
// });


gulp.task('css', function() {
    return gulp.src(src.css)
        .pipe(minifyCSS())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest("code/css"))
        .pipe(reload({stream: true}));
});


gulp.task('js', function() {
    // 1. 找到文件
    return  gulp.src(src.js)
        //2. 压缩文件
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        //3. 另存压缩后的文件
        .pipe(gulp.dest('code/dest'))
        .pipe(reload({stream: true}));
})

//监听js文件变化实现热加载
gulp.task('js-watch', ['js'], browserSync.reload);


// 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task('images', function () {
        // 1. 找到图片
        gulp.src(src.images)
        // 2. 压缩图片
        .pipe($.imagemin())
        // 3. 另存图片
        .pipe(gulp.dest('images'))
        .pipe(reload({stream: true}));
});


gulp.task('default', ['serve']);

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

入侵的艺术

入侵的艺术

Kevin D.Mitnick、William L.Simon / 袁月杨、谢衡 / 清华大学 / 2007-1 / 39.00元

《入侵的艺术》中四个志同道合的伙伴使用口袋大小的计算机在拉斯维加斯大把挣钱。一个无聊的加拿大小伙子居然能够非法访问南部的一家银行。几个年轻人被拉登的恐怖分子征召去攻击Lockheed Martin公司和防御信息系统网络。   [精彩试读一]   [精彩试读二]一起来看看 《入侵的艺术》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

html转js在线工具
html转js在线工具

html转js在线工具