一、从零开始搭建gulp前端自动化

1、首先安装nodejs

2、npm init 初始化 生成package.json

  2.1 可以选装cnpm cnpm是淘宝提供的服务 安装:命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org;  注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;

2、定位到当前目录 cd..   d:   我在d盘新建了文件夹gulp

3、npm install --save-dev gulp  安装gulp

4、新建gulpfile.js  需要安装npm install --save-dev gulp-less  | npm install --save-dev gulp-uglify | npm install --save-dev gulp-autoprefixer

var gulp = require("gulp"),
less = require("gulp-less"),
uglify = require("gulp-uglify"),
autoprefixer = require("gulp-autoprefixer"); gulp.task('testLess',function(){
gulp.src('src/less/index.less')
.pipe(less())
.pipe(gulp.dest('src/css'));
});
//gulp.task('default',['testLess','elseTask']);
gulp.task('jsMin',function(){
gulp.src(['src/js/*.js'])
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
gulp.task('testAutoFx',function(){
gulp.src(['src/css/my.css'])
.pipe(autoprefixer({
browsers:['last 2 versions','Android >=4.0'],
cascade:true,
remove:true
}))
.pipe(gulp.dest('dist/css'))
});

gulp testLess

参考文章http://www.ydcss.com/

gulp前端自动化入门的更多相关文章

  1. gulp 前端自动化工具

    一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片script 等,于是就有了gulp 前端自动化构建工具,它能帮你在前端开发中,节省时间. 1,安装 node.js 因为gulp 构建工具是 ...

  2. gulp前端自动化工作流

    gulp前端自动化工作流 为什么要有自动化的流程? 在我们的开发过程中有大量的重复操作 DRY Don't repeat yourself 开发人员的精力应放在哪? 创造,新的一切前端开发的编译操作 ...

  3. gulp前端自动化构建工具入门篇

    现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用?   什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做 ...

  4. gulp前端自动化构建工具新手入门篇

    很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gul ...

  5. gulp前端自动化构建并上传oss

    前言 前端自动化构建工具从最开始的grunt, gulp, fis等到现在比较流行的webpack可谓层出不穷,个人还是比较倾向于gulp,虽然有的时候会因为某个插件的配置问题头疼很久,但不可否认gu ...

  6. (转)Bootstrap 之 Metronic 模板的学习之路 - (7)GULP 前端自动化工具

    https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要 ...

  7. gulp前端自动化构建工具

    博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 引文 ...

  8. gulp --- 前端自动化构建工具

    目录 1. gulp使用步骤 1.1 安装Node.js 1.2 全局安装gulp 1.3 安装项目依赖包gulp 1.3.1 了解package.json 1.3.2 根据package.json安 ...

  9. gulp前端自动化构建工具使用

    (1)新建项目目录gulp_web (2)项目目录下建目录src里面存放需要进行gulp处理的文件目录及文件 (3)gulpfile.js文件内容为声明需要打包应用的gulp组件及打包文件路径和打包任 ...

随机推荐

  1. 关于UINavigationController的一些技巧

    未自定义任何东西的导航条效果如下: 1.自定义了 leftBarButtonItem 之后,左滑返回手势失效了,解决办法: self.navigationController.interactiveP ...

  2. 2019.5.18-5.19 ACM-ICPC 全国邀请赛(西安)赛后总结

    第一次出去比赛经验太少了!!!果然最大目的是长见识和受刺激Orz 以下流水账: 背了本两千两百页的牛津高阶英汉双解词典,背了吃的,背了衣服……以后这些东西统统不带,买本口袋词典即可.上述物品这次比赛全 ...

  3. NOIP模拟赛 czy的后宫6

    czy的后宫6 题目描述 众所周知的是丧尸czy有很多妹子(虽然很多但是质量不容乐观QAQ),今天czy把n个妹子排成一行来检阅.但是czy的妹子的质量实在……所以czy看不下去了.检阅了第i个妹子会 ...

  4. Linux基础学习-网络管理

    Linux系统网络管理NetworkManager 1 启动网络管理服务和开机自启动 在rhel7中网路管理相关命令nmcli,nmtui,nmtui-edit,nm-connection-edito ...

  5. 第一课:PHP 文件是什么?

    PHP 文件是什么? PHP 文件可包含文本.HTML.JavaScript代码和 PHP 代码 PHP 代码在服务器上执行,结果以纯 HTML 形式返回给浏览器 PHP 文件的默认文件扩展名是 &q ...

  6. 【php】【特殊案例】数组调用方法

    As of PHP 5.4.0, you can call any callable stored in a variable. <?php class Foo { static functio ...

  7. 一个炫酷的flash网站模板

    这是一个炫酷的flash欧美网站模板,它包括首页,公司简介,留言等五个页面,界面转换非常的炫酷!他还有时间.全屏.背景音乐开关的功能!有兴趣的朋友可以看看!贴几张网站图片给大家看看! 下载后直接找到s ...

  8. 优酷项目之 ORM(数据库对象关系映射)代码重写

    前言: 我们在操作数据库时候一般都是通过sql代码来操作mysql数据库中相关数据,这就需要懂得sql语句,那么怎么样才能在不懂sql语句的情况下通过我们所学的python代码来实现对mysql数据库 ...

  9. LeetCode(134) Gas Station

    题目 There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. ...

  10. Linux学习-备份的种类、频率与工具的选择

    完整备份之累积备份 (Incremental backup) 还原的考虑 如果是完整备份的话.若硬件出问题导致系统损毁时,只要将完整备份拿出来,整个给他倾倒回去硬盘, 所有事情就搞定了!有些时候 (例 ...