gulp前端自动化构建工具学习笔记(mac)

gulp是一个前端自动化构建工具,简单方便,学习起来也很方便。gulp是基于node.js的,所以首先要在电脑上安装node.js.

1:安装node.js

  npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等);

2:安装cnpm;

  1. 说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事。来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”
  2. 官方网址:http://npm.taobao.org
  3. 安装:命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org
  4. 注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;

3:全局安装gulp;

npm install -g gulp       //-g   全局安装的意思

4:使用终端工具新建一个文件夹做为项目根目录

mkdir gulptest     //mkdir 是终端新建文件夹的命令    gulptest是新建文件夹的名字

5:初始化gulp

cnpm init //初始化gulp 自动创建package.json       package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件;

gulp前端自动化构建工具学习笔记(mac)_第1张图片

 

初始化之后  直接都是默认  只需要修改红框中的 js名称  改成gulpfile.js   最后输入yes完成 package.json的创建。

6:安装gulp 用到的工具包  (我这里只在项目中安装了gulp gulp-less gulp-minify-css browser-sync

  进入到项目文件夹下  cnpm install gulp --save-dev    (gulp)为插件名称

  安装完成之后会在项目中自动生成一个文件夹node_modules   存放安装的工具包

  gulp  在项目中重新安装一下gulp

  gulp-less 把less文件编译成css文件的插件

  gulp-minify-css  压缩css的插件

  browser-sync   保存文件浏览器自动刷新的插件

gulp前端自动化构建工具学习笔记(mac)_第2张图片

 

7:用webstorm打开gulptest项目 创建文件夹以及文件结构如下

gulp前端自动化构建工具学习笔记(mac)_第3张图片

src>>less>>index.less   该文件为自己编写的less文件

src>>css>>    该文件夹下存放的less被编译成功后的css文件

dist>>css>>   该文件夹下存放的是被压缩后的用于项目中的css文件

8:编写gulpfile.js文件

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less'), //less编译
    cssmin = require('gulp-minify-css'), //css压缩
    browserSync = require("browser-sync").create(),
    reload = browserSync.reload;

/**
 * 定义一个Less编译任务
 */
gulp.task('Less', function () {
    gulp.src('src/less/index.less') //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
});

/**
 * css压缩任务
 */
gulp.task('minCss', function () {
    gulp.src('src/css/index.css')
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css'))
});

/**
 * 监听css文件,当src/css/下所有css文件发生改变时,调用minCss任务
 */
gulp.task('WatchCss', function () {
    gulp.watch('src/css/*.css', ['minCss']);
});

/**
 * 监听less文件,当src/less下所有的less文件发生改变时,调用Less任务
 */
gulp.task('Watch', function () {
    gulp.watch('src/**/*.less', ['Less']); //当所有less文件发生改变时,调用testLess任务
});


gulp.task('default',['Less','Watch','minCss','WatchCss',]); //定义默认任务   只需要开启默认任务就可以

 

9:webstorm  如何打开gulp任务管理器

  在gulpfile.js上右击鼠标,选择Show Gulp  Tasks ,在打开的gulp任务列表中双击default  即可开启任务。

 

10:编写less代码

  打开index.less  文件  编写一段less代码  保存一下 会自动生成css文件和压缩后的css文件。

  编译后的css文件:

gulp前端自动化构建工具学习笔记(mac)_第4张图片

 

压缩后的css文件

gulp前端自动化构建工具学习笔记(mac)_第5张图片

 

转载于:https://www.cnblogs.com/lxgandlz/p/6673438.html

你可能感兴趣的:(前端,json,javascript)