gulp使用入门
介绍:Gulp 是基于node.js的一个前端自动化构建工具,可以使用它构建自动化工作流程(前端集成开发环境);不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成,大大提高我们的工作效率。
gulp的相关文件压缩在下一节,传送
初步尝试:
1、安装gulp ,在安装gulp之前要先安装node ,点这里下载
(当前是win,mac用户加sudo)
npm install gulp -g //全局安装gulp
2、创建gulp项目
进入项目目录,在跟目录下执行
npm init 创建一个packpage.json文件 json文件里没有注释
根据命令提示,设置json参数
{

3、局部安装gulp
npm install gulp --save-dev
--save:将保存配置信息至package.json(package.json是nodejs项目配置文件);
-dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;一般保存在dependencies的像这些express/ejs/body-parser等等。
使用—save-dev,将通知计算机在package.json中添加gulp依赖。 执行完之后,gulp将创建node_modules文件夹,里面有个gulp文件夹(如下图)

4、根目录下创建gulpfile.js文件
var gulp = require('gulp'); //Node去node_modules中查找gulp包
gulp.task('hello', function() { //命名一个简单任务
console.log('Hello World!');
});
5、执行gulp任务
gulp hello // hello 是任务名
命令行出现 :
Hello World!
gulp使用入门的更多相关文章
- gulp详细入门教程
本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...
- 【原】gulp快速入门
今天刚入职了一家新公司,结果明天就要开始项目了.上级说要用gulp来打包代码,所以今晚花了一晚来看这个gulp, 可以说已经入门了.所以做一个小小的总结 : 首先全局安装gulp npm instal ...
- gulp详细入门教程(转载)
本文转载自: gulp详细入门教程
- gulp快速入门
gulp快速入门 因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话如果真是要完整打包上线也不在乎那么几秒时间,对于项目 ...
- gulp快速入门&初体验
前言 一句话先 gulp 是一个可以简单和自动化"管理"前端文件的构建工具 先说我以前的主要工作,我主要是做游戏服务端的,用c++/python,所以我对东西的概念理解难免要套到自 ...
- gulp的使用以及Gulp新手入门教程
Gulp新手入门教程 原文 http://w3ctrain.com/2015/12/22/gulp-for-beginners/ Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭 ...
- Gulp新手入门教程
Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript.压缩图片 ...
- JS那些事儿——Gulp的入门使用
前言 新人使用gulp的一个记录. 首先对于第一个新事物,我会问gulp这是什么? 答:gulp是一个自动化构建工具,它可以做一些自动化的任务,比如: 检查Javascript 编译Sass(或Les ...
- 前端打包构建工具gulp快速入门
因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话确实是个问题,尤其项目大了以后,目前位置遇到的项目都还可以忍受.不过不 ...
- gulp详细入门教程-gulp demo download
简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...
随机推荐
- 谈谈你对spring的理解?
spring么,就是春天了.春天,动物.....不可描述的季节……你懂得!!! 希望这么说能把面试官逗乐吧. spring可以实现java模块化开发,贯穿表现层,业务层,逻辑层,实现了各个层之间的解耦 ...
- vue 下拉刷新 上拉加载(vue-scroller)
<template> <div class="wdRecordCon"> <x-header :left-options="{backTex ...
- 自己实现ArrayList
思路: 一 载体 ArrayList是一个集合容器,必然要有一个保存数据的载体. public class MyArraylist { private final static int INIT_CO ...
- get() got an unexpected keyword argument
TypeError: get() got an unexpected keyword argument 'news_id'ERROR basehttp 154 "GET /news/3/ H ...
- java打包发布程序.jar(Eclipse)
1.程序运行无错误后,右击项目名称,选择Export 2.next后,选择启动时的运行项目,选择压缩包的存储路径 3.finishi即可. 4.运行 cmd存储路径下>java -jar XXX ...
- shell中脚本调试----学习
1.使用dos2unix命令处理在windows下开发的脚本 将windows下编辑的脚本放置到linux下执行的情况如下: [root@ks ~]# cat -v nginx.sh #!/bin/b ...
- IDEA访问不到SpringBoot项目webapp下的内容
参考:https://blog.csdn.net/weixin_43105335/article/details/87863847 https://blog.csdn.net/qq_34797335/ ...
- Vue仿string.format
Vue.prototype.$stringFormat = function stringFormat (formatted, args) { for (let i = 0; i < args. ...
- netcore发布到 iis 设置 部署 环境 变量
原文链接:https://www.cnblogs.com/Ambre/p/9646445.html 打开IIS,选择本机,找到管理-配置编辑器 1:打开IIS,选择本机,找到管理-配置编辑器 2.节选 ...
- MUI 添加自定义图标(注意点)
参考: https://blog.csdn.net/qq_39759115/article/details/79436606 注意: 1. 将这个原来的逗号改成分号 2. 这些图标的名字都可以改名字