首页 > 代码库 > gulp 学习笔记

gulp 学习笔记

  关于学习gulp,推荐大家看前端构建工具gulpjs的使用介绍及技巧,这篇文章就挺全面。

  1、gulp的安装

  gulp是基于nodejs开发的,所以首先确定安装了nodejs。

  (1)全局安装gulp

npm install -g gulp

  (2)针对项目局部安装gulp

npm install gulp

  (3)在项目目录下安装gulp依赖包

npm install --save-dev gulp

或者在项目目录下安装package.json中配置的所有依赖

npm install
{
  "name": "gulp",
  "version": "1.0.0",
  "description": "this is a gulpjs practice",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-uglify": "^2.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-minify-html":"^1.0.6",
    "gulp-minify-css":"^1.2.4"
  },"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "heshuaishuai",
  "license": "ISC"
}

 

  2.gulp的使用

  (1)首先在项目的根目录下创建一个gulpfile.js文件

/**
* Created by heshuaishuai on 2016/12/5.
*/
var gulp = require(‘gulp‘),//加载gulp模块
uglify = require(‘gulp-uglify‘),//加载压缩js模块
concat = require(‘gulp-concat‘),//加载合并模块
htmlmin = require(‘gulp-minify-html‘),//加载压缩html模块
cssmin = require(‘gulp-minify-css‘);//加载压缩css模块
//输出hello
gulp.task(‘hello‘,function () {
console.log(‘hello‘);
});
//压缩js
gulp.task(‘minify-js‘,function () {
gulp.src(‘js/*.js‘)
.pipe(uglify())
.pipe(gulp.dest(‘dest/js‘));
});
//合并js
gulp.task(‘concat-js‘,function () {
gulp.src(‘dest/js/*.js‘)
.pipe(concat(‘all.js‘))
.pipe(gulp.dest(‘dest/js‘));
});
//压缩html
gulp.task(‘minify-html‘,function () {
gulp.src(‘index.html‘)
.pipe(htmlmin())
.pipe(gulp.dest(‘dest/html‘));
});
//压缩css
gulp.task(‘minify-css‘,function () {
gulp.src(‘css/*.css‘)
.pipe(cssmin())
.pipe(gulp.dest(‘dest/css‘));
});
gulp.task(‘default‘,[‘hello‘,‘minify-js‘,‘concat-js‘,‘minify-html‘,‘minify-css‘]);

  require()函数用于加载依赖模块,

  gulp.task(),创建任务函数,

  gulp.task("default",[])为默认任务,当在命令行数据gulp命令时,default后面数组中的任务将被自动执行。

  (2)运行gulp

gulp

  技术分享

  3、gulp的API

  gulp的API主要的有gulp.task、gulp.src、gulp.dest、gulp.watch;

   (1)gulp.task

    创建任务函数   

gulp.task(hello,function () {
    console.log(hello);
});

 

   (2)gulp.src

    用于找到要处理的文件。支持“*”语法,如:"main/*" , "js/*.js" ,"**"代表所有文件夹。

    pipe()返回处理结构以便后面操作的衔接。    

gulp.src(‘js/*.js‘)
  .pipe(uglify());

 

   (3)gulp.dest

    被处理文件的输出路径。    

gulp.pipe(gulp.dest(dest/js));

 

   (4)gulp.watch

    对前面参数地址中的文件进行监听,当有文件内容发生变化时,执行后面参数数组中的任务。    

gulp.watch(less/*.less,[testless]);

 

  4、gulp插件

    (1)压缩js

 

npm install --save-dev gulp-uglify

 

gulp.task(minify-js,function () {
    gulp.src(js/*.js)
        .pipe(uglify())
        .pipe(gulp.dest(dest/js));
});

   (2)合并js

 

 

npm install --save-dev gulp-concat

 

gulp.task(concat-js,function () {
    gulp.src(dest/js/*.js)
        .pipe(concat(all.js))
        .pipe(gulp.dest(dest/js));
});

   (3)压缩css

npm install --save-dev gulp-minify-css
gulp.task(minify-css,function () {
    gulp.src(css/*.css)
        .pipe(cssmin())
        .pipe(gulp.dest(dest/css));
});

  就说这么多了,其他的雷同。

 

 

 

 

 

 

  

 

gulp 学习笔记