Gulp 是一个基于流的自动化构建工具,可以帮我实现很多的功能,比如代码编译、压缩等等。
- gem install sass
- gem install compass
Compass 是 Sass 的工具库,Sass 本身只是一个编译器,Compass 在它的基础上,封装了一系列有用的模块和模板,补充 Sass 的功能。它们之间的关系,有点像 Java script 和 jQuery 的关系
npm install gulp -g
- {
- "name": "myweb",
- "version": "1.0.0",
- "main": "index.js",
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
- },
- "author": "",
- "license": "ISC",
- "description": "",
- "devDependencies": ""
- }
npm install --save-dev gulp 如果想在安装的时候把 gulp 写进项目 package.json 文件的依赖中,则可以加上–save-dev:
说明:--save :将配置信息保存到 package.json 中,
同时 --save :也是项目生产环境,项目发布之后还依赖的东西,保存在 dependencies
例如:如果你用了 jQuery,由于发布之后还是依赖 jQuery,所以是 dependencies
--save-dev :是项目开发环境依赖的东西,保存在 devDependencies 中
例如:写 sass 代码,如果你想编译成 CSS 发布那么 gulp-sass 就是 `devDependencies
- npm install gulp - sass--save - dev
使用 gulp-livereload 插件,安装: npm install --save-dev gulp-livereload
要在谷歌 浏览器 中安装对应的插件 chrome liveReload
- // 获取gulp
- var gulp = require('gulp');
- //获取gulp-sass模块
- var sass = require('gulp-sass');
- //获取gulp-livereload模块(实现浏览器自动刷新)
- var livereload = require('gulp-livereload');
- // 给gulp设置任务,编译sass
- // 在命令行输入 gulp sass 启动此任务
- gulp.task('sass',
- function() {
- // 被编译文件的路径
- return gulp.src('./src/sass/*.scss')
- // return gulp.src('./src/sass/**/*.scss')
- // ** 匹配路径中的0个或多个目录及其子目录,需要单独出现,即它左右不能有其他东西了
- //使用数组的方式来匹配多种文件 gulp.src(['js/*.js','css/*.css','*.html'])
- // * 匹配文件路径中的0个或多个字符
- // **/*.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js
- // 通过pipe管道,使用 sass (此处的sass是上面使用 var声明的 sass )来读取/src/**/*.scss文件
- .pipe(sass())
- //编译后文件输出的目录
- .pipe(gulp.dest('./dist/css'))
- // 使用livereload 方法实现浏览器自动刷新
- .pipe(livereload());
- });
- // 使用 gulp watch命令来监听scss文件变化,
- gulp.task('watch',
- function() {
- livereload.listen(); //要在这里调用listen()方法
- // 监听文件修改
- gulp.watch('./src/sass/*.scss', ['sass']);
- });
- // 在命令行使用 gulp auto 启动此任务
- gulp.task('auto',
- function() {
- // 监听文件修改
- gulp.watch('./src/sass/**/*.scss', ['sass'])
- /*gulp.watch(glob[, opts], tasks)
- glob 为要监视的文件匹配模式,规则和用法与gulp.src()方法中的glob相同。
- opts 为一个可选的配置对象,通常不需要用到
- tasks 为文件变化后要执行的任务,为一个数组*/
- });
- // 使用 gulp.task('default') 定义默认任务
- // 在命令行使用 gulp 启动 sass 任务和 auto 任务
- gulp.task('default', ['sass', 'auto'])
- npm install gulp - less--save - dev
- // 获取gulp
- var gulp = require('gulp');
- //获取gulp-less模块
- var less = require("gulp-less")
- //编译less
- //在命令行输入gulp less启动此任务
- gulp.task('less',
- function() {
- //1.找到less文件
- gulp.src('./src/less/*.less')
- //2.编译为css
- .pipe(less())
- //3.另存为css
- .pipe(gulp.dest('./dist/css'))
- })
- //在命令行gulp auto启动此任务
- gulp.task('auto',
- function() {
- //监听文件修改,当文件修改则执行less任务
- gulp.watch('./src/less/*.less', ['less'])
- })
- //使用gulp.task('default')定义默认任务
- //在命令行使用gulp启动images任务和auto任务
- gulp.task('default', ['less', 'auto'])
可以把后面配置文件融合到一起
- gulp.task('auto',
- function() {
- //监听文件修改,当文件修改则执行less任务
- gulp.watch('./src/less/*.less', ['less']) gulp.watch('./src/sass/**/*.scss', ['scss'])
- })
- //使用gulp.task('default')定义默认任务
- //在命令行使用gulp启动images任务和auto任务
- gulp.task('default', ['less', 'sass', 'auto'])
来源: https://www.2cto.com/kf/201712/705087.html