手机充电慢是什么原因?索尼耗电快充电慢还行,就是充电充的慢,两个多小时才充到74%

114网址导航您所在的位置: &
前端开发构建工具gulp的安装使用
时间: 编辑:前端小鬼头 来源:本站整理
曾几何时还在使用grunt作为前端的构建工具,直到有一天同事向我推荐了gulp,在这里博主将不讨论gulp与grunt各自优势的比较,只为大家介绍gulp如何安装和使用。
Gulp 是用 node 写的一个前端构建工具,他可以对sass、js、html、coffee等进行编译,并且提供了很多的插件,稍后会为大家介绍。
windows上的安装方法:
1、下载node-v0.10.29-x64.msi 提取码:kj9b 并安装
2、运行cmd,在全局环境下安装gulp
npm install -g gulp
3、在项目的根目录下新建 package.json 文件
4、在当前项目目录下运行
npm install --save-dev gulp
注意要有--save-dev ,不然保存不到package.json 中
这样我们的gulp 管理工具就安装完成了。
5、插件安装
  gulp 在编译时提供了各类的插件。
  诸如 gulp-sass 、fs 等等 下面列表是我在工作中常用的一些插件,并与代码相对应。
npm install path fs gulp-sass gulp-uglify gulp-minify- gulp-wrapper gulp-replace gulp-webserver --save-dev gulp
这里提供给大家一个网站 /package/package& 可以查到很多gulp 的插件,非常实用。
6、在项目文件夹新建gulpfile.js 插件引用内容如下:
var gulp = require('gulp');
var path = require('path');
var fs = require('fs');
// Plugins
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var minifyCSS = require('gulp-minify-css');
var wrapper = require('gulp-wrapper');
var replace = require('gulp-replace');
var webserver = require('gulp-webserver');
7、gulpfile.js 编译代码
  gulp 主要提供了
编译sass 文件
gulp.task('sass', function() {
gulp.src([
'css/**/*.scss',
'!css/**/_*.scss'
.pipe(minifyCSS())
.pipe(wrapper({
header: '/* @update: ' + getNowDate() + ' */ \n'
.pipe(gulp.dest('build/css'))
getNowDate是个自定义的获取当前时间戳的函数。
gulp.src 是路径,! 代表不包括什么类型文件。**可以是多级目录。
如何正确编译?
// 新建 task build
gulp.task('build', function() {
gulp.run(['css']);
好了 gulp就介绍到这里,其他诸如 js coffee html 等等 还有各种有趣实用的插件就等客官自己去探索吧!
热门关键字前端自动化(5)
安装gulp需要node的环境,到官网https://nodejs.org/en/下载node,不知道怎么下,百度去
下载之后点击一路next,在安装的时候把node加到全局变量里面去。有这个选择。装好node,在cmd窗口里面node -v可以查看node的版本
npm -v可以查看npm的版本
然后安装gulp
npm install gulp -g全局安装gulp
在d盘建立一个gulpCode空文件夹。
cmd窗口中转d盘d:
进入gulpCode文件夹 cd gulpCode
npm init生成package.json
touch gulpfile.js生成gulpfile.js
然后安装一些插件,就可以实现自动化了。
gulpfile.js里面需要配置这些东西
//载入gulp核心包
const & gulp & = require(&gulp&);
const concat & = require('gulp-concat');
const uglify & = require('gulp-uglify');
const imagemin = require('gulp-imagemin');
const connect &= require(&gulp-connect&);
const htmlmin &= require(&gulp-htmlmin&);
var browserSync = require('browser-sync');
var reload = browserSync.
//require的这些都是需要安装的插件,npm install 插件名 (--save-dev)括号里面的参数你写了就会在package.json里面有。
//gulp是用来帮我们执行一些重复操作
//如何定义一个任务
//第一个参数是任务名,第二个参数是任务的执行体
gulp.task('dest',function () {
//文件copy
gulp.src('src/**/*.*')//src下面所有目录文件
& &//让文件流走向下一个环节
& &.pipe(gulp.dest('dist/'))//dest指定文件输出地方
//让任务运行还是借助命令行
gulp.task('default',function(){
gulp.watch('src/*',['dest']);//第一个参数是任务发生的目录,第二个参数是任务的名字
// gulp.task('connect', function() {
// &connect.server({
// & &root: 'src',
// & &livereload: true
// & & & gulp.watch(['src/**/*.*'], ['reload']); &&
// gulp.task('reload', function () {
// & gulp.src('src/**/*.*')
// & & .pipe(connect.reload());
gulp.task(&concat&,function(){
& gulp.src(['src/js/*.js'])
& & &.pipe(concat(&all.js&))
& & &.pipe(gulp.dest('dist/js'));
& //压缩单个js文件
gulp.task('jsmin',function(){
& gulp.src('dist/js/all.js')
& & &.pipe(uglify())
& & &.pipe(gulp.dest('dist/js'));
&// 压缩多个文件
gulp.task('jsmins',function(){
& gulp.src(['src/js/*.js'])
& & &.pipe(uglify())
& & &.pipe(gulp.dest('dist/js'));
//压缩图片
gulp.task('imagemin', () =&
gulp.src('src/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
gulp.task(&htmlmin&,function(){
var options = {
& & & & removeComments: true,//清除HTML注释
& & & & collapseWhitespace: true,//压缩HTML
& & & & collapseBooleanAttributes: true,//省略布尔属性的值 &input checked=&true&/& ==& &input /&
& & & & removeEmptyAttributes: true,//删除所有空格作属性值 &input id=&& /& ==& &input /&
& & & & removeScriptTypeAttributes: true,//删除&script&的type=&text/javascript&
& & & & removeStyleLinkTypeAttributes: true,//删除&style&和&link&的type=&text/css&
& & & & minifyJS: true,//压缩页面JS
& & & & minifyCSS: true//压缩页面CSS
& & gulp.src('src/*.html')
& & & & .pipe(htmlmin(options))
& & & & .pipe(gulp.dest('dist'));
// 起服务器监视文件改动并重新载入
gulp.task('server', function() {
& browserSync({
& & server: {
& & & baseDir: 'src'
& gulp.watch(['*.html', 'styles/**/*.css', 'scripts/**/*.js'], {cwd:&src&},reload);//options.cwd:输出文件夹的cwd,默认为:process.cwd()。
也可以& gulp.watch(&src/**/*.*&).on('change', browserSync.reload);
执行就是gulp 任务名。
补充一些cmd中经常用的切盘和目录的命令
cd &..返回上一级
cd &/返回根目录,\也可以
cd gulpCode进入gulpCode目录下面
参考知识库
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
访问:1511次
排名:千里之外
原创:14篇
(2)(4)(1)(1)(3)(1)(1)(1)经检测你所在的网络可能存在爬虫,因资源限制,我们只能拒绝你的请求。
如果你是推酷的用户,可以以继续访问使用。
如有疑问,可将IP信息发送到
请求解封。

我要回帖

更多关于 手机充电缓慢耗电快 的文章

 

随机推荐