前段构建工具gulp（一）

最新推荐文章于 2023-09-05 22:45:00 发布

IT_wanghe

最新推荐文章于 2023-09-05 22:45:00 发布

阅读量504

点赞数

分类专栏： gulp 文章标签： node.js gulp

本文链接：https://blog.csdn.net/IT_wanghe/article/details/53736194

版权

gulp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

gulp创建以及常见的插件使用

内容提要

1.安装node.js
2.安装gulp
3.新建package.json文件
4.本地安装gulp插件
5.新建gulpfile.js文件
6.运行gulp

1.安装node.js

1.1 gulp是基于nodejs的所以需要安装nodejs，在nodejs官网进行安装。
1.2 nodejs安装好之后使用命令行进行查看：

node -v //查看nodejs版本号
npm -v  //查看npm版本号

2.安装gulp

全局安装gulp,全局安装gulp的目的是为了通过她执行gulp任务；

npm install gulp -g
gulp -v //检查是否安装成功

3.新建package.json文件

3.1 package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件；
3.2 它是这样一个json文件（注意：json文件内是不能写注释的，复制下列内容请删除注释）：

{
  "name": "test",   //项目名称（必须）
  "version": "1.0.0",   //项目版本（必须）
  "description": "This is for study gulp project !",   //项目描述（必须）
  "homepage": "",   //项目主页
  "repository": {    //项目资源库
    "type": "git",
    "url": "https://git.oschina.net/xxxx"
  },
  "author": {    //项目作者信息
    "name": "wanghe",
    "email": "lucaswanghe@qq.com"
  },
  "license": ",MIT",    //项目许可协议
  "devDependencies": {    //项目依赖的插件
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }
}

3.3手动配置packsge,json文件

npm init //项目目录下

4.本地安装gulp插件

4.1 在项目目录下，安装gulp

npm install --save-dev
npm install gulp --save-dev

4.2 安装插件

npm install gulp-less --save-dev

5.新建gulpfile.js文件


//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less'),
    livereload = require('gulp-livereload'),//自动刷新页面
    autoprefixer = require('gulp-autoprefixer'),
    connect = require('gulp-connect');

//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
    gulp.src(['src/less/*.less','!src/less/extend/{reset,test}.less']) //该任务针对的文件

        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('src/css'))//将会在src/css下生成index.css
        .pipe(livereload());//自动刷新页面
});
gulp.task('testAutoFx', function () {
    gulp.src(['src/less/*.less'])
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'Android >= 4.0','last 2 Explorer versions','Firefox >= 20'],
            cascade: true, //是否美化属性值 默认：true 像这样：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove:true //是否去掉不必要的前缀 默认：true 
        }))
        .pipe(gulp.dest('src/less'));
});
gulp.task('connect',function(){

    connect.server({
        root:'./',  
        ip:'127.0.0.1',
        livereload:true
    })
});//创建服务器环境
gulp.task('html', function(){
  gulp.src('src/*.html')
      .pipe(connect.reload());
});
gulp.task('default',['testLess','testWatch','connect']); //定义默认任务

//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组) 
//gulp.dest(path[, options]) 处理完后文件生成路径
gulp.task('testWatch', function () {
    livereload.listen();
    gulp.watch('src/**/*.less', ['testAutoFx']);
    gulp.watch('src/**/*.less', ['testLess']); //当所有less文件发生改变时，调用testLess任务
    gulp.watch('src/*.html',['html']);

});