前端自动化工具Gulp入门及常规配置

1、首先你要装上nodejs环境;
http://nodejs.org
在命令行输入node -v
回车(Enter),如果安装正确,你会看到n
ode的版本号;
在命令行输入npm -v
如果正确,你可以看到npm的版本号;

如果错误,请重试;

2、
cd定位到目录,用法:cd + 路径 ;
cd..返回上层目录
dir列出文件列表;
cls清空命令提示符窗口内容。

3、安装npmjs.org 镜像
npm install cnpm -g –registry=https://registry.npm.taobao.org

4、全局安装gulp
cnpm install gulp -g
回车(Enter)
在输入:gulp -v
如果看到版本号,说明安装正确;

5、配置package.json文件

{
  "name": "test",//项目名称(必须)
  "version": "1.0.0",////项目版本(必须)
  "description": "This is for study gulp project !",//项目描述(必须)
  "homepage": "",//项目主页
  "repository": {//项目资源库
    "type": "",
    "url": ""//地址
  },
  "author": {
    "name": "xyphf",//作者
    "email": "2766588380@qq.com"//邮箱
  },
  "license": "ISC", //项目许可协议
  "devDependencies": {//项目依赖的插件
    "gulp": "^3.8.11",
    "gulp-concat": "^2.6.0",//文件合并
    "gulp-cssmin": "^0.1.7",//css压缩
    "gulp-imagemin": "^3.1.1",//图片压缩
    "gulp-jshint": "^2.0.2",//js检查
    "gulp-rename": "^1.2.2",//重新命名
    "gulp-uglify": "^2.0.0",//js压缩
    "jshint": "^2.9.4"
  }
}

注意:注意:json文件内是不能写注释的,复制下列内容请务必删除注释;
你可以将这个package.json复制下去,直接执行
cnpm install
将直接下载所依赖的插件;(分别是js/css的合并与压缩,图片的压缩);

6、在本地安装gulp
cnpm install gulp –save-dev

7、新建新建gulpfile.js文件(重要)
gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件(其实将gulpfile.js放入其他文件夹下亦可)。
gulpfile.js

var gulp = require('gulp'), //本地安装gulp所用到的地方
    uglify = require('gulp-uglify'),
    cssmin = require('gulp-cssmin'),
    concat = require('gulp-concat'),
    jshint = require('gulp-jshint'),
    rename = require('gulp-rename'),
    imagemin = require('gulp-imagemin');

// 检查脚本
gulp.task('jshint', function() {
    gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

//合并、压缩js
gulp.task('uglify', function () {
    gulp.src('src/js/*.js') //该任务针对的文件
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./src/concatjs'))
        .pipe(uglify()) //该任务调用的模块
        .pipe(rename('all.min.js'))
        .pipe(gulp.dest('src/minjs')); 
});

//合并、压缩css
gulp.task('cssmin', function () {
    gulp.src('src/css/*.css') //该任务针对的文件
        .pipe(concat("all.css"))
        .pipe(gulp.dest("./src/concatcss"))
        .pipe(cssmin()) //该任务调用的模块
        .pipe(rename('all.min.css'))
        .pipe(gulp.dest('src/cssmin')); 
});
gulp.task('imagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .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('src/imgs'));
});

gulp.task('default',['jshint','uglify','cssmin','imagemin']); //定义默认任务

8、运行gulp
gulp

项目文件夹如下:
gulp前端自动化工具

重要参考文案:
http://www.ydcss.com/archives/18
http://www.tuicool.com/articles/FJVNZf

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Gulp是一种前端自动化工具,它可以帮助前端开发人员自动完成一些重复性工作,例如压缩CSS和JavaScript文件、自动刷新浏览器、合并文件等。 使用Gulp需要先安装Node.js和npm,然后使用npm安装Gulp。安装完成后,可以在项目的根目录下创建一个名为gulpfile.js的文件,该文件中定义了Gulp要执行的任务和任务的具体操作。 在gulpfile.js中,可以使用Gulp提供的API来定义任务。例如,可以使用gulp.task()方法定义一个任务,该方法接受两个参数:任务的名称和任务要执行的操作。可以使用gulp.src()方法指定要处理的文件,然后使用各种Gulp插件来执行各种操作,例如gulp-concat用于合并文件,gulp-uglify用于压缩JavaScript文件等。 最后,可以使用gulp.dest()方法将处理后的文件保存到指定目录。定义好任务后,可以在终端中使用gulp命令来执行任务,Gulp会自动执行任务并输出相关日志信息。 ### 回答2: Gulp是一个前端自动化工具,它通过编写简洁、易于理解的代码来帮助开发者自动化前端开发中的各种任务。 首先,Gulp使用简单且灵活。它使用流的概念,让开发者能够通过将任务连接在一起构建整个开发流程。开发者可以定义各种任务,如压缩文件、合并文件、编译代码等等,然后通过管道将这些任务链接在一起。这种方式使得构建前端项目变得非常容易,同时也让开发者能够根据自己的需求定制任务流程。 其次,Gulp有大量的插件可供选择。Gulp的插件系统非常强大,社区中有数以千计的插件可用。这些插件可以帮助开发者解决各种问题,如自动添加浏览器前缀、压缩文件、优化图片等等。开发者可以根据自己的需求选择合适的插件使用,从而提高工作效率。 另外,Gulp还具有良好的生态系统。无论是官方文档还是社区文档,都非常详细且易于理解。开发者可以很容易地找到所需的信息和教程,学习如何使用Gulp来优化自己的工作流程。 总的来说,Gulp是一个功能强大且易于使用的前端自动化工具。它能够帮助开发者提高工作效率,简化开发流程,同时也具有丰富的插件和优秀的生态系统。无论是小型项目还是大型项目,Gulp都是一个非常好的选择。 ### 回答3: Gulp是一个前端自动化工具,用于简化开发流程和提高工作效率。它基于流(stream)的概念,可以自动化处理和优化前端工作中的许多重复任务。 首先,通过在项目中配置gulpfile.js文件,可以定义各种任务(task)和相应的操作。可以使用Gulp来执行各种编译、压缩、合并、重命名、清理等操作,例如压缩CSS和JavaScript文件、编译Sass或Less、优化图像等等。这些任务可以按照开发者的需求进行自定义配置,满足不同项目的要求。 Gulp的使用也非常简单,只需要通过命令行运行gulp命令并指定要执行的任务即可。当有文件变动时,Gulp可以自动监听文件的变化并重新执行相应的任务,实时更新项目的输出。 此外,Gulp还支持插件生态系统,拥有大量的插件可供开发者选择使用。这些插件可以用于执行各种任务,例如自动生成CSS前缀、合并相同类型的文件、启动本地开发服务器等等。 总的来说,Gulp通过简化和自动化前端开发流程,大大提高了开发效率。它的简单易用和丰富的插件生态系统使得开发者能够根据项目需求快速搭建和优化前端工作流程。使用Gulp可以减少重复劳动,提高代码质量和开发效率,因此成为前端开发中不可或缺的工具之一。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值